/* ==================================================
   TOP Main Background
================================================== */

.top-main {
  background: var(--bg-top);
}

/* ==================================================
   01: 

Main Visual
================================================== */

.top-mv {
  position: relative;

  width: 100%;

  padding: 0;

  background: transparent;
}

.top-mv__visual {
  position: relative;

  width: 100%;
  max-width: 1920px;

  margin: 0 auto;

  overflow: hidden;
}


/* ==================================================
   MV Slider
================================================== */

.top-mv__slides {
  position: relative;

  width: 100%;
}

.top-mv__slide {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  width: 100%;

  opacity: 0;

  transition: opacity 1.4s ease;

  pointer-events: none;
}

.top-mv__slide:first-child {
  position: relative;
}

.top-mv__slide.is-active {
  z-index: 2;

  opacity: 1;

  pointer-events: auto;
}


/* ==================================================
   Main Visual Image
================================================== */

.top-mv__image {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;
}


/* ==================================================
   Copy
================================================== */

.top-mv__copy {
  position: absolute;
  top: 20%;
  left: 9.5%;

  z-index: 3;
}

.top-mv__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.48;

  letter-spacing: 0;
}

.top-mv__title-line {
  display: block;
}

.top-mv__title-accent {
  color: #C6A86A;
}

.top-mv__title-small {
  font-size: 40px;
  font-weight: 700;
}

/* ==================================================
   MV Slide 02
================================================== */

/* 2枚目：メインコピーを白 */
.top-mv__slide--02 .top-mv__title,
.top-mv__slide--02 .top-mv__title span {
  color: #FFFFFF;
	 text-shadow: none;
}




/* ==================================================
   Area
================================================== */

.top-mv__area {
  position: absolute;
  right: 4.5%;
  bottom: 8%;

  margin: 0;

  z-index: 6;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 180px;
  height: 180px;

  color: #F4FCFF;

  border: 1px solid #b3d4fca6;
  border-radius: 50%;

  background: #b3d4fc82;

  font-size: 30px;
  font-weight: 500;
  line-height: 1.45;

  text-align: center;

  box-shadow:
    0 10px 20px rgba(31, 54, 86, 0.10),
    inset 8px 8px 14px rgba(255, 255, 255, 1),
    inset -8px -8px 14px rgba(79, 143, 212, 0.10);
}

.top-mv__area::before {
  content: "";

  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;

  border-radius: 50%;

  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 1),
    inset -3px -4px 6px rgba(79, 143, 212, 0.12);

  pointer-events: none;
}

.top-mv__area::after {
  content: "";

  position: absolute;
  top: 8px;
  left: 17%;

  width: 55%;
  height: 14%;

  border-radius: 50%;

  background: #edf3f838;

  filter: blur(3px);

  pointer-events: none;
}

.top-mv__area-small,
.top-mv__area-main {
  position: relative;

  z-index: 1;
}

.top-mv__area-small {
  display: block;

  font-size: 18px;
}

.top-mv__area-main {
  display: block;

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

/* 2枚目表示中：右下円の文字を紺色 */
.top-mv__area.is-slide-02 .top-mv__area-small,
.top-mv__area.is-slide-02 .top-mv__area-main {
  color: #2e5ea7;
}


/* ==================================================
   Features
================================================== */

.top-mv__features {
  position: absolute;
  bottom: 6%;
  left: 8%;

  z-index: 6;

  display: flex;
  align-items: stretch;

  gap: 42px;
}

.top-mv__feature {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 270px;
  min-height: 102px;

  padding: 18px 22px;

  background-color: rgba(255, 255, 255, 0.94);

  border-radius: 22px;
}

.top-mv__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 58px;

  margin-right: 14px;
}

.top-mv__feature-icon img {
  display: block;

  width: 100%;
  height: auto;
}

.top-mv__feature-text {
  margin: 0;

  color: #2E5EA7;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;

  letter-spacing: 0;
}


/* ==================================================
   Tablet / Middle
================================================== */

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

  .top-mv {
    padding-bottom: 60px;
  }

  .top-mv__visual {
    overflow: visible;
  }


  /* Image */

  .top-mv__image {
    width: 100%;
    height: auto;
  }


  /* Copy */

  .top-mv__copy {
    top: 20%;
    left: 6%;
  }

  .top-mv__title {
    font-size: 38px;
    line-height: 1.5;
  }

  .top-mv__title-small {
    font-size: 25px;
  }


  /* Area */

  .top-mv__area {
    right: 4%;
    bottom: 8%;

    width: 125px;
    height: 125px;

    font-size: 18px;
    line-height: 1.45;
  }

  .top-mv__area-main {
    font-size: 22px;
  }


  /* Features */

  .top-mv__features {
    right: 5%;
    bottom: -50px;
    left: 5%;

    gap: 14px;
  }

  .top-mv__feature {
    justify-content: center;

    width: 33.333%;
    min-height: 100px;

    padding: 14px 10px;

    border-radius: 20px;
  }

  .top-mv__feature-icon {
    width: 38px;

    margin-right: 10px;
  }

  .top-mv__feature-text {
    font-size: 15px;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-mv {
    position: relative;

    width: 100%;

    padding: 0;

    background: transparent;
  }

  .top-mv__visual {
    position: relative;

    width: 100%;
    height: 570px;

    overflow: hidden;

    background-color: #F4FAFE;
  }


  /* ------------------------------------------
     Slider
  ------------------------------------------ */

  .top-mv__slides {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
  }

  .top-mv__slide,
  .top-mv__slide:first-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
  }


  /* ------------------------------------------
     MV Image
  ------------------------------------------ */

  .top-mv__image {
    position: absolute;
    top: 0;
    right: -80px;
    left: auto;

    z-index: 1;

    width: auto;
    max-width: none;
    height: 455px;

    transform: none;
  }


  /* ------------------------------------------
     White Gradient
  ------------------------------------------ */

  .top-mv__slide::after {
    content: "";

    position: absolute;
    top: 210px;
    left: 0;

    z-index: 2;

    width: 74%;
    height: 155px;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.52) 58%,
      rgba(255, 255, 255, 0.28) 78%,
      rgba(255, 255, 255, 0) 100%
    );

    pointer-events: none;
  }
	/* ------------------------------------------
   Slide 02 / SP Navy Gradient
------------------------------------------ */

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

  .top-mv__slide--02::after {
    background: linear-gradient(
      90deg,
      rgba(12, 61, 125, 0.88) 0%,
      rgba(12, 61, 125, 0.78) 58%,
      rgba(12, 61, 125, 0.48) 78%,
      rgba(12, 61, 125, 0) 100%
    );
  }

}


  /* ------------------------------------------
     Copy
  ------------------------------------------ */

  .top-mv__copy {
    position: absolute;
    top: 235px;
    left: 20px;

    z-index: 3;

    width: auto;
  }

  .top-mv__title {
    margin: 0;

    color: #0C3D7D;

    font-family: var(--font-ja);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.55;

    letter-spacing: 0;

    text-shadow:
      0 1px 4px rgba(255, 255, 255, 0.9);
  }

  .top-mv__title-line {
    display: block;

    white-space: nowrap;
  }

  .top-mv__title-accent {
    color: #C6A86A;

    text-shadow:
      0 1px 9px rgba(255, 255, 255, 0.9);
  }

  .top-mv__title-small {
    font-size: 16px;
  }


  /* ------------------------------------------
     Area
  ------------------------------------------ */

  .top-mv__area {
    position: absolute;
    top: 300px;
    right: 16px;
    bottom: auto;

    z-index: 6;

    width: 104px;
    height: 104px;

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

  .top-mv__area-small {
    display: block;

    font-size: 14px;
  }

  .top-mv__area-main {
    display: block;

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


  /* ------------------------------------------
     Features
  ------------------------------------------ */

  .top-mv__features {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;

    z-index: 6;

    display: flex;
    align-items: stretch;

    gap: 9px;
  }

  .top-mv__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 33.333%;
    height: 125px;
    min-height: 0;

    padding: 12px 4px 10px;

    background-color: rgba(255, 255, 255, 0.96);

    border-radius: 18px;

    box-shadow:
      0 3px 10px rgba(31, 54, 86, 0.06);
  }

  .top-mv__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 31px;

    margin: 0 0 9px;
  }

  .top-mv__feature-icon img {
    display: block;

    width: 100%;
    height: auto;
  }

  .top-mv__feature-text {
    margin: 0;

    color: #2E5EA7;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;

    text-align: center;
  }

}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-mv__visual {
    height: 550px;
  }


  /* Image */

  .top-mv__image {
    right: -48px;

    height: 435px;
  }


  /* Copy */

  .top-mv__copy {
    top: 240px;
    left: 16px;
  }

  .top-mv__title {
    font-size: 22px;
    line-height: 1.55;
  }

  .top-mv__title-small {
    font-size: 15px;
  }


  /* Area */

  .top-mv__area {
    top: 280px;
    right: 13px;

    width: 110px;
    height: 110px;

    font-size: 12px;
  }

  .top-mv__area-main {
    font-size: 15px;
  }


  /* Features */

  .top-mv__features {
    right: 16px;
    bottom: 16px;
    left: 16px;

    gap: 7px;
  }

  .top-mv__feature {
    height: 120px;

    padding: 10px 3px 9px;

    border-radius: 16px;
  }

  .top-mv__feature-icon {
    width: 28px;

    margin-bottom: 8px;
  }

  .top-mv__feature-text {
    font-size: 10px;
  }

}


/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {

  .top-mv__slide {
    transition: none;
  }

}

/* ==================================================
   02: Media / Campaign
================================================== */

.top-media {
  width: 100%;

  padding: 80px 0 120px;

  background: transparent;
}

.top-media__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 88px;
}

.top-media__item {
  display: block;

  min-width: 0;

  color: inherit;

  text-decoration: none;
}


/* ==================================================
   02:

Media / Campaign - Label
================================================== */

.top-media__label {
  display: flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-width: 140px;
  height: 34px;

  margin: 0 0 32px;

  padding: 0 18px;

  background-color: #FFFFFF;

  border: 1.5px solid currentColor;
  border-radius: 999px;

  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1;
font-weight: 500;
  letter-spacing: 0.02em;
}

.top-media__label--media {
  color: #326D8C;
}

.top-media__label--campaign {
  color: #328C8B;
}

.top-media__label--sponsor {
  color: #7D7D7D;
}


/* ==================================================
    Media / Campaign - Image
================================================== */

.top-media__image {
  width: 100%;

  overflow: hidden;

  background-color: #FFFFFF;

  box-shadow: 0 6px 14px rgba(31, 54, 86, 0.12);
}

.top-media__image img {
  display: block;

  width: 100%;
  height: auto;
}


/* ==================================================
  Media / Campaign - Hover
================================================== */

@media (hover: hover) {

  .top-media__item {
    transition: opacity 0.3s ease;
  }

  .top-media__item:hover {
    opacity: 0.78;
  }
}


/* ==================================================
    Media / Campaign - Tablet
================================================== */

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

  .top-media__inner {
    gap: 46px;
  }

  .top-media__label {
    min-width: 130px;
    height: 38px;

    margin-bottom: 24px;

    padding: 0 15px;

    font-size: 22px;
  }
}


/* ==================================================
   Media / Campaign - Smartphone
================================================== */

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

  .top-media__inner {
    grid-template-columns: repeat(2, 1fr);

    column-gap: 14px;
    row-gap: 34px;
  }

  .top-media__label {
    min-width: 0;
    height: 28px;

    margin-bottom: 12px;

    padding: 0 12px;

    border-width: 1px;

    font-size: 14px;
  }

  .top-media__image {
    box-shadow: 0 4px 10px rgba(31, 54, 86, 0.10);
  }
}


/* ==================================================
  Campaign - Small Smartphone
================================================== */

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

  .top-media__inner {
    column-gap: 10px;
    row-gap: 30px;
  }

  .top-media__label {
    height: 26px;

    margin-bottom: 10px;

    padding: 0 10px;

    font-size: 13px;
  }
}
/* ==================================================
   予約ボタン
================================================== */

.top-reservation {
  display: flex;
  align-items: stretch;
  justify-content: center;

  width: 100%;

  margin-top: 90px;

  gap: 130px;
}

.top-reservation__web,
.top-reservation__phone {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 400px;
  min-height: 100px;

  padding: 16px 28px;

  border-radius: 22px;

  text-decoration: none;
}


/* ==================================================
   WEB予約
================================================== */

.top-reservation__web {
  color: #FFFFFF;
  background-color: #F9A634;
}

.top-reservation__web-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 36px;

  margin-right: 18px;
}

.top-reservation__web-icon img {
  display: block;

  width: 100%;
  height: auto;
}

.top-reservation__web-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-reservation__web-main {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;

  white-space: nowrap;
}

.top-reservation__web-note {
  margin-top: 5px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}


/* ==================================================
   電話予約
================================================== */

.top-reservation__phone {
  color: #2E5EA7;
  background-color: #FFFFFF;

  border: 2px solid #559EEC;
}

.top-reservation__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 34px;

  margin-right: 16px;
}

.top-reservation__phone-icon img {
  display: block;

  width: 100%;
  height: auto;
}

.top-reservation__phone-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-reservation__phone-number {
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;

  letter-spacing: 0.02em;

  white-space: nowrap;
}

.top-reservation__phone-note {
  margin-top: 5px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}


/* ==================================================
   Hover
================================================== */

@media (hover: hover) {

  .top-reservation__web,
  .top-reservation__phone {
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .top-reservation__web:hover,
  .top-reservation__phone:hover {
    transform: translateY(-3px);
    opacity: 0.88;
  }
}


/* ==================================================
   Tablet
================================================== */

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

  .top-reservation {
    margin-top: 70px;

    padding: 0 30px;

    gap: 40px;
  }

  .top-reservation__web,
  .top-reservation__phone {
    width: 340px;
    min-height: 90px;

    padding: 14px 22px;
  }

  .top-reservation__web-main {
    font-size: 26px;
  }

  .top-reservation__phone-number {
    font-size: 30px;
  }
}


/* ==================================================
   Smartphone
================================================== */

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

  .top-reservation {
    flex-direction: column;

    margin-top: 48px;

    padding: 0 20px;

    gap: 12px;
  }

  .top-reservation__web,
  .top-reservation__phone {
    width: 100%;
    min-height: 72px;

    padding: 10px 18px;

    border-radius: 20px;
  }

  .top-reservation__web-icon {
    width: 28px;

    margin-right: 12px;
  }

  .top-reservation__web-main {
    font-size: 22px;
  }

  .top-reservation__web-note {
    margin-top: 2px;

    font-size: 11px;
  }

  .top-reservation__phone-icon {
    width: 27px;

    margin-right: 12px;
  }

  .top-reservation__phone-number {
    font-size: 25px;
  }

  .top-reservation__phone-note {
    margin-top: 2px;

    font-size: 11px;
  }
}

/* ==================================================
   Heartのつながる診療
================================================== */

.top-heart {
  width: 100%;

  padding: 0px 50px 0px;

  background: transparent;
}

.top-heart__inner {
  width: 100%;
  max-width: 1720px;

  margin: 0 auto;
}


/* ==================================================
   Title
================================================== */

.top-heart__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.4;

  text-align: center;
}

.top-heart__line {
  width: 365px;
  height: 2px;

  margin: 30px auto 52px;

  background-color: #C6A86A;
}


/* ==================================================
   Lead
================================================== */

.top-heart__lead {
  margin: 0 0 46px;

  color: #2E5EA7;

  font-size: 30px;
  font-weight: 700;
  line-height: 1.7;

  text-align: center;
}


/* ==================================================
   Text
================================================== */

.top-heart__text {
  margin: 0;

  color: #1F3656;

  font-size: 22px;
  font-weight: 400;
  line-height: 1.9;

  letter-spacing: 0.02em;
}


/* ==================================================
   Tablet
================================================== */

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

  .top-heart {
    padding: 0px 40px 90px;
  }

  .top-heart__title {
    font-size: 42px;
  }

  .top-heart__line {
    width: 300px;

    margin-top: 26px;
    margin-bottom: 44px;
  }

  .top-heart__lead {
    margin-bottom: 36px;

    font-size: 24px;
  }

  .top-heart__text {
    font-size: 17px;
    line-height: 1.9;
  }
}


/* ==================================================
   Smartphone
================================================== */

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

  .top-heart {
    padding: 0px 20px;
  }

  .top-heart__title {
    font-size: 30px;
    line-height: 1.45;
  }

  .top-heart__line {
    width: 180px;
    height: 1px;

    margin-top: 22px;
    margin-bottom: 36px;
  }

  .top-heart__lead {
    margin-bottom: 28px;

    font-size: 19px;
    line-height: 1.7;

    text-align: left;
  }

  .top-heart__text {
    font-size: 16px;
    line-height: 1.9;

    letter-spacing: 0;
  }
}


/* ==================================================
  Small Smartphone
================================================== */

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

  .top-heart {
    padding: 56px 16px 64px;
  }

  .top-heart__title {
    font-size: 27px;
  }

  .top-heart__line {
    width: 160px;

    margin-bottom: 32px;
  }

  .top-heart__lead {
    font-size: 18px;
  }
}

/* ==================================================
   04: 

お知らせ / 診療時間
================================================== */

.top-info {
  width: 100%;

  padding: 80px 0 0;

  background: transparent;
}

.top-info__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  align-items: stretch;

  gap: 72px;
}

.top-info__card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 670px;

  padding: 40px 56px;

  background-color: #FFFFFF;

  border: 1px solid #E3F0FA;
  border-radius: 24px;

  box-shadow: 0 6px 18px rgba(31, 54, 86, 0.10);
}


/* ==================================================
   Title
================================================== */

.top-info__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;

  text-align: center;
}

.top-info__title-line {
  width: 260px;
  max-width: 60%;
  height: 2px;

  margin: 12px auto 34px;

  background-color: #C6A86A;
}


/* ==================================================
   お知らせ - List
================================================== */

.top-info__news-list {
  display: flex;
  flex-direction: column;

  gap: 28px;
}

.top-info__news-item {
  display: grid;
  grid-template-columns: 130px 1fr;

  align-items: start;

  gap: 24px;
}

.top-info__news-date {
  padding-top: 4px;

  color: #1F3656;

  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.top-info__news-content {
  min-width: 0;
}

.top-info__news-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 94px;
  height: 30px;

  margin-bottom: 5px;
  padding: 0 14px;

  color: #FFFFFF;
  background-color: #559EEC;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.top-info__news-heading {
  margin: 0 0 2px;

  color: #1F3656;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.top-info__news-link {
  display: block;

  color: inherit;

  text-decoration: none;
}

.top-info__news-excerpt {
  margin: 0;

  overflow: hidden;

  color: #1F3656;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-info__footer {
  display: flex;
  justify-content: center;

  margin-top: auto;
  padding-top: 36px;
}

.top-info__more {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 265px;
  min-height: 58px;

  color: #2E5EA7;
  background-color: #FFFFFF;

  border: 2px solid #559EEC;
  border-radius: 22px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}
.top-info__news-link {
  display: block;
  width: 100%;

  color: inherit;
  text-decoration: none;
}
.top-info__news-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;

  width: 100%;
  gap: 16px;
}

.top-info__news-excerpt {
  min-width: 0;
  margin: 0;

  overflow: hidden;

  color: #1F3656;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-info__news-more {
  display: block;
  width: 100%;

  color: #68778d;

  font-size: 14px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* ==================================================
   診療時間 - Table
================================================== */

.top-info__hours-table-wrap {
  width: 100%;

  overflow: hidden;
}

.top-info__hours-table {
  width: 100%;
  min-width: 0;

  border-collapse: separate;
  border-spacing: 0;

  color: #1F3656;

  font-size: 15px;
  line-height: 1.4;

  table-layout: fixed;
}

.top-info__hours-table th,
.top-info__hours-table td {
  height: 50px;

  padding: 6px 0;

  border-right: 1px solid #D6E7F4;
  border-bottom: 1px solid #D6E7F4;

  text-align: center;
  vertical-align: middle;

  line-height: 13px;
}

.top-info__hours-table thead th {
  background-color: #EDF3F8;

  font-weight: 600;

  white-space: nowrap;
}

.top-info__hours-table thead th:first-child {
  width: 26%;

  border-top: 1px solid #D6E7F4;
  border-left: 1px solid #D6E7F4;
  border-radius: 22px 0 0;
}

.top-info__hours-table thead th:nth-child(2),
.top-info__hours-table thead th:nth-child(3),
.top-info__hours-table thead th:nth-child(4),
.top-info__hours-table thead th:nth-child(5),
.top-info__hours-table thead th:nth-child(6),
.top-info__hours-table thead th:nth-child(7) {
  width: 9.5%;
}

.top-info__hours-table thead th:last-child {
  width: 17%;

  border-top: 1px solid #D6E7F4;
  border-radius: 0 22px 0 0;
}

.top-info__hours-table tbody th {
  background-color: #FFFFFF;

  border-left: 1px solid #D6E7F4;

  font-size: 14px;
  font-weight: 500;

  white-space: nowrap;
}

.top-info__hours-table tbody tr:last-child th {
  border-radius: 0 0 0 22px;
}

.top-info__hours-table tbody tr:last-child td:last-child {
  border-radius: 0 0 22px;
}

.top-info__hours-table td {
  padding-right: 0;
  padding-left: 0;

  color: #2E5EA7;
background-color: #fff;
  font-size: 21px;
  font-weight: 600;
}


/* ==================================================
   診療時間 - Note
================================================== */

.top-info__hours-note {
  margin-top: 22px;

  color: #1F3656;

  font-size: 15px;
  line-height: 1.7;
}

.top-info__hours-note p {
  margin: 0;
}


/* ==================================================
   診療時間 - Buttons
================================================== */

.top-info__hours-buttons {
  display: flex;
  flex-direction: column;

  gap: 18px;

  margin-top: auto;
  padding-top: 28px;
}

.top-info__phone,
.top-info__reservation {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 98px;

  padding: 12px 24px;

  border-radius: 24px;

  text-decoration: none;
}

.top-info__phone {
  color: #2E5EA7;
  background-color: #FFFFFF;

  border: 2px solid #559EEC;
}

.top-info__phone-icon,
.top-info__reservation-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 42px;

  margin-right: 14px;
}

.top-info__phone-icon img,
.top-info__reservation-icon img {
  display: block;

  width: 100%;
  height: auto;
}

.top-info__phone-text,
.top-info__reservation-text {
  display: flex;
  flex-direction: column;
  align-items: center;

  line-height: 1.15;
}

.top-info__phone-number {
  color: #2E5EA7;

  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 700;

  white-space: nowrap;
}

.top-info__phone-note {
  margin-top: 3px;

  color: #559EEC;

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

.top-info__reservation {
  color: #FFFFFF;
  background-color: #F9A634;

  border: 2px solid #F9A634;
}

.top-info__reservation-main {
  color: #FFFFFF;

  font-size: 30px;
  font-weight: 700;

  white-space: nowrap;
}

.top-info__reservation-note {
  margin-top: 4px;

  color: #FFFFFF;

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


/* ==================================================
   Hover
================================================== */

@media (hover: hover) {

  .top-info__news-link,
  .top-info__more,
  .top-info__phone,
  .top-info__reservation {
    transition: opacity 0.3s ease;
  }

  .top-info__news-heading a:hover,
  .top-info__more:hover,
  .top-info__phone:hover,
  .top-info__reservation:hover {
    opacity: 0.78;
  }
}


/* ==================================================
   お知らせ / 診療時間 - Tablet
================================================== */

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

  .top-info__inner {
    gap: 36px;
  }

  .top-info__card {
    min-height: 620px;

    padding: 36px 30px 40px;
  }

  .top-info__title {
    font-size: 30px;
  }

  .top-info__title-line {
    width: 210px;

    margin-bottom: 30px;
  }

  .top-info__news-item {
    grid-template-columns: 105px 1fr;

    gap: 16px;
  }

  .top-info__news-date {
    font-size: 14px;
  }

  .top-info__news-heading {
    font-size: 16px;
  }

  .top-info__news-excerpt {
    font-size: 14px;
  }

  .top-info__hours-table {
    font-size: 12px;
  }

  .top-info__hours-table th,
  .top-info__hours-table td {
    padding-right: 0;
    padding-left: 0;
  }

  .top-info__hours-table thead th:first-child {
    width: 27%;
  }

  .top-info__hours-table thead th:nth-child(2),
  .top-info__hours-table thead th:nth-child(3),
  .top-info__hours-table thead th:nth-child(4),
  .top-info__hours-table thead th:nth-child(5),
  .top-info__hours-table thead th:nth-child(6),
  .top-info__hours-table thead th:nth-child(7) {
    width: 9.5%;
  }

  .top-info__hours-table thead th:last-child {
    width: 16%;
  }

  .top-info__hours-table tbody th {
    font-size: 13px;
  }

  .top-info__hours-table td {
    font-size: 18px;
  }

  .top-info__hours-note {
    font-size: 14px;
  }

  .top-info__phone,
  .top-info__reservation {
    min-height: 82px;
  }

  .top-info__phone-icon,
  .top-info__reservation-icon {
    width: 34px;

    margin-right: 10px;
  }

  .top-info__phone-number {
    font-size: 27px;
  }

  .top-info__reservation-main {
    font-size: 25px;
  }
}


/* ==================================================
   お知らせ / 診療時間 - Smartphone
================================================== */

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


	
  .top-info__inner {
    grid-template-columns: 1fr;

    gap: 32px;
  }

  .top-info__card {
    min-height: 0;

    padding: 40px 20px;

    border-radius: 20px;
  }

  .top-info__title {
    font-size: 26px;
  }

  .top-info__title-line {
    width: 180px;

    margin-top: 10px;
    margin-bottom: 28px;
  }

  .top-info__news-list {
    gap: 24px;
  }

  .top-info__news-item {
    grid-template-columns: 88px 1fr;

    gap: 12px;
  }

  .top-info__news-date {
    padding-top: 3px;

    font-size: 13px;
  }

  .top-info__news-category {
    min-width: 78px;
    height: 26px;

    padding: 0 10px;

    font-size: 12px;
  }

  .top-info__news-heading {
    font-size: 15px;
  }

  .top-info__news-excerpt {
    font-size: 14px;
  }

  .top-info__footer {
    margin-top: 32px;
    padding-top: 0;
  }

  .top-info__more {
    width: 220px;
    min-height: 52px;

    border-radius: 20px;

    font-size: 15px;
  }

  .top-info__hours-table {
    font-size: 15px;
  }

  .top-info__hours-table th,
  .top-info__hours-table td {
    height: 46px;

    padding-right: 0;
    padding-left: 0;

    line-height: 13px;
  }

  .top-info__hours-table thead th:first-child {
    width: 31%;
  }

  .top-info__hours-table thead th:nth-child(2),
  .top-info__hours-table thead th:nth-child(3),
  .top-info__hours-table thead th:nth-child(4),
  .top-info__hours-table thead th:nth-child(5),
  .top-info__hours-table thead th:nth-child(6),
  .top-info__hours-table thead th:nth-child(7) {
    width: 8.5%;
  }

  .top-info__hours-table thead th:last-child {
    width: 18%;
  }

  .top-info__hours-table tbody th {
    font-size: 13px;

    white-space: nowrap;
  }

  .top-info__hours-table td {
    font-size: 16px;
	  background-color: #FFFFFF;
  }

  .top-info__hours-note {
    margin-top: 18px;

    font-size: 14px;
  }

  .top-info__hours-buttons {
    gap: 12px;

    margin-top: 26px;
    padding-top: 0;
  }

  .top-info__phone,
  .top-info__reservation {
    min-height: 72px;

    padding: 10px 16px;

    border-radius: 20px;
  }

  .top-info__phone-icon,
  .top-info__reservation-icon {
    width: 28px;

    margin-right: 10px;
  }

  .top-info__phone-number {
    font-size: 25px;
  }

  .top-info__phone-note {
    font-size: 11px;
  }

  .top-info__reservation-main {
    font-size: 24px;
  }

  .top-info__reservation-note {
    font-size: 12px;
  }
}


/* ==================================================
   お知らせ / 診療時間 - Small Smartphone
================================================== */

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

  .top-info__card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .top-info__news-item {
    grid-template-columns: 78px 1fr;

    gap: 10px;
  }

  .top-info__news-date {
    font-size: 12px;
  }

  .top-info__hours-table {
    font-size: 9px;
  }

  .top-info__hours-table thead th:first-child {
    width: 31%;
  }

  .top-info__hours-table thead th:nth-child(2),
  .top-info__hours-table thead th:nth-child(3),
  .top-info__hours-table thead th:nth-child(4),
  .top-info__hours-table thead th:nth-child(5),
  .top-info__hours-table thead th:nth-child(6),
  .top-info__hours-table thead th:nth-child(7) {
    width: 8.5%;
  }

  .top-info__hours-table thead th:last-child {
    width: 18%;
  }

  .top-info__hours-table tbody th {
    font-size: 10px;
  }

  .top-info__hours-table td {
    font-size: 15px;
  }

  .top-info__phone-number {
    font-size: 22px;
  }

  .top-info__reservation-main {
    font-size: 22px;
  }
}

/* ==================================================
   05:

白内障手術
================================================== */

.top-cataract {
  width: 100%;

  padding-top: 80px;
}

.top-cataract > .l-inner {
  position: relative;

  padding: 40px 60px;

  overflow: hidden;

  background-image: url("https://www.shinkawa-med.jp/wp-content/uploads/2026/09/top-h.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  border-radius: 28px;
}

.top-cataract__grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(400px, 0.95fr);

  gap: 72px;
}


/* ==================================================
   Main
================================================== */

.top-cataract__main {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.top-cataract__title {
  margin: 18px 0 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0;
}

.top-cataract__text {
  position: relative;
  z-index: 1;

  max-width: 720px;

  margin: 54px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.9;
}

.top-cataract__text::before {
  content: "";

  position: absolute;
  top: -12px;
  right: -24px;
  bottom: -12px;
  left: -24px;
  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.58) 68%,
    rgba(255, 255, 255, 0) 100%
  );

  border-radius: 16px;

  pointer-events: none;
}


/* ==================================================
   Features
================================================== */

.top-cataract__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  width: 100%;

  margin-top: auto;
  padding: 22px 0px 18px;

  background-color: rgba(255, 255, 255, 0.88);

  border-radius: 24px;
}

.top-cataract__feature {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;

  padding: 0 10px;

  text-align: center;
}

.top-cataract__feature + .top-cataract__feature {
  border-left: 1px solid #C6A86A;
}

.top-cataract__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 62px;

  margin-bottom: 8px;
}

.top-cataract__feature-icon img {
  display: block;

  width: auto;
  max-width: 58px;
  max-height: 58px;
}

.top-cataract__feature-text {
  margin: 0;

  color: #0C3D7D;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;

  text-align: center;
}


/* ==================================================
   Side
================================================== */

.top-cataract__side {
  display: flex;
  flex-direction: column;

  gap: 32px;

  min-width: 0;
}

.top-cataract__photo {
  overflow: hidden;

  border-radius: 24px;
}

.top-cataract__photo img {
  display: block;

  width: 100%;
  height: 205px;

  object-fit: cover;
}


/* ==================================================
   Links
================================================== */

.top-cataract__links {
  display: flex;
  flex-direction: column;
  justify-content: center;

  flex: 1;

  padding: 28px 42px;

  background-color: rgba(255, 255, 255, 0.92);

  border-radius: 24px;
}

.top-cataract__link {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 18px;
  align-items: center;

  gap: 12px;

  min-height: 46px;

  color: #0C3D7D;

  text-decoration: none;
}

.top-cataract__check,
.top-cataract__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-cataract__check img {
  display: block;

  width: 23px;
  height: auto;
}

.top-cataract__link-text {
  min-width: 0;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;

  white-space: nowrap;
}

.top-cataract__arrow img {
  display: block;

  width: 17px;
  height: auto;
}


/* ==================================================
   Hover
================================================== */

@media (hover: hover) {

  .top-cataract__link {
    transition: opacity 0.3s ease;
  }

  .top-cataract__link:hover {
    opacity: 0.65;
  }
}


/* ==================================================
   白内障手術 - Middle
================================================== */

@media screen and (max-width: 1294px) and (min-width: 1025px) {

  .top-cataract > .l-inner {
    padding: 40px 42px;
  }

  .top-cataract__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);

    gap: 42px;
  }

  .top-cataract__title {
    margin-top: 10px;

    font-size: 32px;
    line-height: 1.7;
  }

  .top-cataract__text {
    margin-top: 38px;

    font-size: 16px;
    line-height: 1.75;
  }

  .top-cataract__features {
    padding: 18px 14px 16px;
  }

  .top-cataract__feature {
    padding: 0 6px;
  }

  .top-cataract__feature-icon {
    height: 52px;

    margin-bottom: 7px;
  }

  .top-cataract__feature-icon img {
    max-width: 50px;
    max-height: 50px;
  }

  .top-cataract__feature-text {
    font-size: 14px;
    line-height: 1.45;
  }

  .top-cataract__side {
    gap: 24px;
  }

  .top-cataract__photo img {
    height: 180px;
  }

  .top-cataract__links {
    padding: 24px;
  }

  .top-cataract__link {
    grid-template-columns: 21px minmax(0, 1fr) 15px;

    gap: 8px;

    min-height: 32px;
  }

  .top-cataract__check img {
    width: 20px;
  }

  .top-cataract__link-text {
    font-size: 13px;
  }

  .top-cataract__arrow img {
    width: 15px;
  }
}


/* ==================================================
   白内障手術 - Tablet
================================================== */

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

  .top-cataract > .l-inner {
    padding: 46px 40px 32px;
  }

  .top-cataract__grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.85fr);

  gap: 30px;
}

  .top-cataract__title {
    margin-top: 10px;

    font-size: 24px;
    line-height: 1.7;
  }

  .top-cataract__text {
    margin-top: 36px;

    font-size: 16px;
    line-height: 1.7;
  }
	
  .top-cataract__features {
    padding: 18px 12px 16px;
  }

  .top-cataract__feature {
    padding: 0 6px;
  }

  .top-cataract__feature-icon {
    height: 50px;

    margin-bottom: 7px;
  }

  .top-cataract__feature-icon img {
    max-width: 48px;
    max-height: 48px;
  }

  .top-cataract__feature-text {
    font-size: 14px;
    line-height: 1.45;
  }

  .top-cataract__side {
    gap: 24px;
  }

  .top-cataract__photo img {
    height: 180px;
  }

  .top-cataract__links {
    padding: 24px;
  }

  .top-cataract__link {
    grid-template-columns: 21px minmax(0, 1fr) 16px;

    gap: 9px;

    min-height: 43px;
  }

  .top-cataract__check img {
    width: 20px;
  }

  .top-cataract__link-text {
    font-size: 13px;
  }

  .top-cataract__arrow img {
    width: 15px;
  }
	
	.top-cataract__text-br {
    display: none;
  }

	
}


/* ==================================================
   白内障手術 - Smartphone
================================================== */

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

  .top-cataract > .l-inner {
    width: 100%;
    max-width: none;

    margin-right: 0;
    margin-left: 0;

    padding: 40px 20px;

    background-position: center;
    background-size: auto 100%;

    border-radius: 0;
  }

  .top-cataract__grid {
    display: flex;
    flex-direction: column;

    gap: 28px;
  }

  .top-cataract__title {
    margin: 0;

    font-size: 22px;
    line-height: 1.65;
  }

  .top-cataract__text {
    margin-top: 26px;

    font-size: 16px;
    line-height: 1.6;
  }

  .top-cataract__text::before {
    content: none;
  }


  /* ==================================================
     Features
  ================================================== */

  .top-cataract__features {
    grid-template-columns: repeat(2, 1fr);

    margin-top: 28px;
    padding: 0 12px;

    background-color: rgba(255, 255, 255, 0.90);

    border-radius: 20px;
  }

  .top-cataract__feature {
    min-height: 138px;

    padding: 18px 10px;
  }

  .top-cataract__feature + .top-cataract__feature {
    border-left: 0;
  }

  .top-cataract__feature:nth-child(even) {
    border-left: 1px solid #C6A86A;
  }

  .top-cataract__feature:nth-child(n + 3) {
    border-top: 1px solid #C6A86A;
  }

  .top-cataract__feature-icon {
    height: 48px;

    margin-bottom: 8px;
  }

  .top-cataract__feature-icon img {
    max-width: 46px;
    max-height: 46px;
  }

  .top-cataract__feature-text {
    font-size: 15px;
    line-height: 1.45;
  }


  /* ==================================================
     Side
  ================================================== */

  .top-cataract__side {
    gap: 20px;
  }

  .top-cataract__photo {
    border-radius: 20px;
  }

  .top-cataract__photo img {
    width: 100%;
    height: auto;

    aspect-ratio: 16 / 8.5;

    object-fit: cover;
  }


  /* ==================================================
     Links
  ================================================== */

  .top-cataract__links {
    padding: 22px 20px;

    border-radius: 20px;
  }

  .top-cataract__link {
    grid-template-columns: 23px minmax(0, 1fr) 17px;

    gap: 11px;

    min-height: 30px;
  }

  .top-cataract__check img {
    width: 22px;
  }

  .top-cataract__link-text {
    font-size: 15px;
    line-height: 1.4;

    white-space: normal;
  }

  .top-cataract__arrow img {
    width: 16px;
  }
}


/* ==================================================
   白内障手術 - Small Smartphone
================================================== */

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

  .top-cataract > .l-inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .top-cataract__title {
    font-size: 23px;
  }

  .top-cataract__features {
    padding-right: 8px;
    padding-left: 8px;
  }

  .top-cataract__feature {
    min-height: 132px;

    padding-right: 6px;
    padding-left: 6px;
  }

  .top-cataract__feature-text {
    font-size: 14px;
  }

  .top-cataract__links {
    padding-right: 16px;
    padding-left: 16px;
  }

  .top-cataract__link {
    grid-template-columns: 21px minmax(0, 1fr) 15px;

    gap: 9px;
  }

  .top-cataract__check img {
    width: 20px;
  }

  .top-cataract__link-text {
    font-size: 14px;
  }

  .top-cataract__arrow img {
    width: 14px;
  }
}

/* ==================================================
   06: 

小児眼科 / コンタクトレンズ / 医療アートメイク
================================================== */

.top-care {
  width: 100%;
  padding-top: 80px;
}

.top-care__upper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}


/* ==================================================
   小児眼科
================================================== */

.top-care__child {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 350px;

  padding: 40px;

  overflow: hidden;

  background-image: url("/wp-content/uploads/2026/09/top-ch-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  border-radius: 24px;
}

.top-care__child-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: start;
  gap: 28px;
}

.top-care__child-title {
  margin: 0;

  color: #76532F;

  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.35;
}

.top-care__child-photo {
  width: 180px;
  justify-self: end;

  overflow: hidden;

  border-radius: 18px;
}

.top-care__child-photo img {
  display: block;

  width: 100%;
  aspect-ratio: 3 / 2;

  object-fit: cover;
  object-position: center;
}

.top-care__child-text {
  width: 100%;

  margin: 30px 0 0;

  color: #4F555C;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.top-care__child-button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  width: 100%;
  max-width: 270px;
  min-height: 52px;

  margin-top: auto;
  padding: 0 22px;

  color: #FFFFFF;
  background-color: #EB9938;

  border-radius: 20px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}


/* ==================================================
   コンタクトレンズ
================================================== */

.top-care__contact {
  position: relative;

  min-width: 0;
  min-height: 350px;

  padding: 40px;

  overflow: hidden;

  background-image: url("/wp-content/uploads/2026/09/top-con-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  border-radius: 24px;
}

.top-care__contact-title {
  position: relative;
  z-index: 2;

  width: 58%;

  margin: 0;

  color: #559EEC;

  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.35;
}

.top-care__contact-photo {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 1;

  width: 180px;

  overflow: hidden;

  border-radius: 18px;
}

.top-care__contact-photo img {
  display: block;

  width: 100%;
  aspect-ratio: 3 / 2;

  object-fit: cover;
  object-position: center;
}

.top-care__contact-list {
  position: relative;
  z-index: 2;

  width: 64%;

  margin: 30px 0 0;
  padding: 0 0 76px;

  list-style: none;
}

.top-care__contact-list li {
  position: relative;

  min-height: 28px;

  padding-left: 31px;

  color: #1F3656;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.top-care__contact-list li::before {
  content: "✓";

  position: absolute;
  top: 1px;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  color: #559EEC;

  border: 2px solid #559EEC;

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

.top-care__contact-circle {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 130px;
  height: 130px;

  background-image: url("/wp-content/uploads/2026/09/top-con-circle-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.top-care__contact-circle-inner {
  text-align: center;
}

.top-care__contact-circle-small,
.top-care__contact-circle-time,
.top-care__contact-circle-note {
  margin: 0;
  color: #2E5EA7;
}

.top-care__contact-circle-small {
  font-size: 12px;
  line-height: 1.4;
}

.top-care__contact-circle-time {
  font-size: 19px;
  line-height: 1.35;
}

.top-care__contact-circle-time span {
  font-size: 13px;
}

.top-care__contact-moon {
  display: block;

  width: 26px;

  margin: 4px auto;
}

.top-care__contact-circle-note {
  font-size: 11px;
  line-height: 1.4;
}

.top-care__contact-button {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 3;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  width: 250px;
  min-height: 52px;

  padding: 0 22px;

  color: #FFFFFF;
  background-color: #559EEC;

  border-radius: 20px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}


/* ==================================================
   ボタン矢印
================================================== */

.top-care__button-arrow {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}


/* ==================================================
   医療アートメイク
================================================== */

.top-care__artmake {
  position: relative;

  margin-top: 40px;
  padding: 40px;

  overflow: hidden;

  background-image: url("/wp-content/uploads/2026/09/top-artmake-bg2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  border-radius: 24px;
}

.top-care__artmake-heading {
  position: relative;
  z-index: 2;
}

.top-care__artmake-kicker {
  margin: 0 0 4px;

  color: #C99A3D;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.top-care__artmake-title {
  margin: 0;

  color: #222D3A;

  font-family: var(--font-ja);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.3;
}

.top-care__artmake-title span {
  color: #328C8B;
}

.top-care__artmake-en {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;

  margin: 0;

  color: #B7B4AD;

  font-family: var(--font-script);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;

  opacity: 0.5;
}

.top-care__artmake-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: center;

  gap: 64px;

  margin-top: 26px;
}

.top-care__artmake-image {
  overflow: hidden;
}

.top-care__artmake-image img {
  display: block;

  width: 100%;
  height: auto;
}

.top-care__artmake-content {
  min-width: 0;
}

.top-care__artmake-lead {
  margin: 0;

  color: #328C8B;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

.top-care__artmake-text {
  margin: 26px 0 0;

  color: #4F555C;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

.top-care__artmake-button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  width: 260px;
  min-height: 50px;

  margin: 34px 0 0 auto;
  padding: 0 22px;

  color: #FFFFFF;
  background-color: #B7B4AD;

  border-radius: 20px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}


/* ==================================================
   Hover
================================================== */

@media (hover: hover) {

  .top-care__child-button,
  .top-care__contact-button,
  .top-care__artmake-button {
    transition: opacity 0.3s ease;
  }

  .top-care__child-button:hover,
  .top-care__contact-button:hover,
  .top-care__artmake-button:hover {
    opacity: 0.72;
  }

}


/* ==================================================
   Middle
================================================== */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-care__upper {
    gap: 32px;
  }


  /* 小児眼科 */

  .top-care__child {
    min-height: 350px;
    padding: 40px;
  }

  .top-care__child-head {
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 20px;
  }

  .top-care__child-title {
    font-size: 23px;
    line-height: 1.45;
  }

  .top-care__child-photo {
    width: 130px;
  }

  .top-care__child-text {
    margin-top: 26px;

    font-size: 15px;
    line-height: 1.7;
  }

  .top-care__child-button {
    max-width: 220px;
  }


  /* コンタクトレンズ */

  .top-care__contact {
    min-height: 350px;
    padding: 40px;
  }

  .top-care__contact-title {
    width: 62%;

    font-size: 23px;
    line-height: 1.45;
  }

  .top-care__contact-photo {
    top: 40px;
    right: 40px;

    width: 130px;
  }

  .top-care__contact-list {
    width: 68%;

    margin-top: 24px;
    padding-bottom: 72px;
  }

  .top-care__contact-list li {
    min-height: 24px;

    padding-left: 25px;

    font-size: 12px;
    line-height: 1.45;
  }

  .top-care__contact-list li::before {
    width: 17px;
    height: 17px;

    font-size: 10px;
  }

  .top-care__contact-circle {
    right: 40px;
    bottom: 40px;

    width: 110px;
    height: 110px;
  }

  .top-care__contact-circle-small {
    font-size: 9px;
  }

  .top-care__contact-circle-time {
    font-size: 15px;
  }

  .top-care__contact-circle-time span {
    font-size: 10px;
  }

  .top-care__contact-moon {
    width: 20px;
  }

  .top-care__contact-circle-note {
    font-size: 8px;
  }

  .top-care__contact-button {
    bottom: 40px;
    left: 40px;

    width: 190px;
    min-height: 48px;

    font-size: 14px;
  }


  /* 医療アートメイク */

  .top-care__artmake {
    padding: 40px;
  }

  .top-care__artmake-en {
    top: 40px;
    right: 40px;
  }

  .top-care__artmake-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 46px;
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-care__upper {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }


  /* 小児眼科 */

  .top-care__child {
    min-height: 0;
    padding: 40px;
  }

  .top-care__child-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 40px;
  }

  .top-care__child-title {
    font-size: 30px;
    line-height: 1.45;
  }

  .top-care__child-photo {
    width: 100%;
    max-width: 280px;
  }

  .top-care__child-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;

    object-fit: cover;
    object-position: center;
  }

  .top-care__child-text {
    margin-top: 30px;

    font-size: 17px;
    line-height: 1.7;
  }

  .top-care__child-button {
    max-width: 270px;
    min-height: 52px;

    margin-top: 28px;

    font-size: 16px;
  }


  /* コンタクトレンズ */

  .top-care__contact {
    min-height: 390px;
    padding: 40px;
  }

  .top-care__contact-title {
    width: 50%;

    font-size: 30px;
    line-height: 1.45;
  }

  .top-care__contact-photo {
    top: 40px;
    right: 40px;

    width: 280px;
    max-width: 40%;
  }

  .top-care__contact-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;

    object-fit: cover;
    object-position: center;
  }

  .top-care__contact-list {
    width: 52%;

    margin-top: 30px;
    padding-bottom: 76px;
  }

  .top-care__contact-list li {
    min-height: 29px;

    padding-left: 30px;

    font-size: 15px;
    line-height: 1.5;
  }

  .top-care__contact-list li::before {
    width: 20px;
    height: 20px;

    font-size: 12px;
  }

  .top-care__contact-circle {
    right: 40px;
    bottom: 40px;

    width: 130px;
    height: 130px;
  }

  .top-care__contact-circle-small {
    font-size: 11px;
  }

  .top-care__contact-circle-time {
    font-size: 18px;
  }

  .top-care__contact-circle-time span {
    font-size: 12px;
  }

  .top-care__contact-moon {
    width: 24px;
  }

  .top-care__contact-circle-note {
    font-size: 10px;
  }

  .top-care__contact-button {
    bottom: 40px;
    left: 40px;

    width: 250px;
    min-height: 52px;

    font-size: 16px;
  }


  /* 医療アートメイク */

  .top-care__artmake {
    padding: 40px;
  }

  .top-care__artmake-title {
    font-size: 32px;
  }

  .top-care__artmake-en {
    top: 40px;
    right: 40px;

    font-size: 44px;
  }

  .top-care__artmake-body {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 40px;

    margin-top: 28px;
  }

  .top-care__artmake-lead {
    font-size: 16px;
  }

  .top-care__artmake-text {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.7;
  }

  .top-care__artmake-button {
    width: 240px;

    margin-top: 26px;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-care__upper {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }


  /* 小児眼科 */

  .top-care__child {
    min-height: 0;
    padding: 40px 20px;
  }

  .top-care__child-head {
    display: contents;
  }

  .top-care__child-title {
    order: 1;

    margin: 0;

    font-size: 24px;
    line-height: 1.5;
  }

  .top-care__child-photo {
    order: 2;

    width: 100%;
    max-width: 300px;

    margin-top: 24px;
    margin-right: auto;
    margin-left: auto;

    border-radius: 18px;
  }

  .top-care__child-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;

    object-fit: cover;
    object-position: center;
  }

  .top-care__child-text {
    order: 3;

    width: 100%;

    margin-top: 24px;

    font-size: 16px;
    line-height: 1.7;
  }

  .top-care__child-button {
    order: 4;

    width: 100%;
    max-width: none;
    min-height: 52px;

    margin-top: 26px;

    font-size: 16px;
  }


  /* コンタクトレンズ */

  .top-care__contact {
    display: flex;
    flex-direction: column;

    min-height: 0;

    padding: 40px 20px;

    background-position: center;
    background-size: cover;
  }

  .top-care__contact-title {
    position: static;

    order: 1;

    width: 100%;

    margin: 0;

    font-size: 24px;
    line-height: 1.5;
  }

  .top-care__contact-photo {
    position: static;

    order: 2;

    width: 100%;
    max-width: 300px;

    margin-top: 24px;
    margin-right: auto;
    margin-left: auto;

    border-radius: 18px;
  }

  .top-care__contact-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;

    object-fit: cover;
    object-position: center;
  }

  .top-care__contact-list {
    order: 3;

    width: 100%;

    margin: 24px 0 0;
    padding: 0;
  }

  .top-care__contact-list li {
    min-height: 31px;

    padding-left: 31px;

    font-size: 16px;
    line-height: 1.55;
  }

  .top-care__contact-list li::before {
    top: 2px;

    width: 20px;
    height: 20px;

    font-size: 12px;
  }

  .top-care__contact-circle {
    position: relative;
    right: auto;
    bottom: auto;

    order: 4;
    align-self: center;

    width: 130px;
    height: 130px;

    margin-top: 24px;
  }

  .top-care__contact-circle-small {
    font-size: 11px;
  }

  .top-care__contact-circle-time {
    font-size: 18px;
  }

  .top-care__contact-circle-time span {
    font-size: 12px;
  }

  .top-care__contact-moon {
    width: 24px;
  }

  .top-care__contact-circle-note {
    font-size: 10px;
  }

  .top-care__contact-button {
    position: static;

    order: 5;

    width: 100%;
    min-height: 52px;

    margin-top: 24px;

    font-size: 16px;
  }


  /* 医療アートメイク */

  .top-care__artmake {
    display: flex;
    flex-direction: column;

    margin-top: 24px;
    padding: 40px 20px;

    border-radius: 22px;
  }

  .top-care__artmake-heading {
    order: 1;
  }

  .top-care__artmake-kicker {
    margin-bottom: 4px;

    font-size: 13px;
  }

  .top-care__artmake-title {
    font-size: 30px;
  }

  .top-care__artmake-body {
    display: contents;
  }

  .top-care__artmake-image {
    order: 2;

    width: 100%;

    margin-top: 24px;
  }

  .top-care__artmake-image img {
    width: 100%;
    height: auto;
  }

  .top-care__artmake-en {
    position: static;

    order: 3;

    margin: 20px 0 0;

    color: #B7B4AD;

    font-family: var(--font-script);
    font-size: 38px;
    font-weight: 400;
    line-height: 1;

    text-align: right;

    opacity: 0.5;
  }

  .top-care__artmake-content {
    display: contents;
  }

  .top-care__artmake-lead {
    order: 4;

    margin: 24px 0 0;

    font-size: 16px;
    line-height: 1.7;
  }

  .top-care__artmake-text {
    order: 5;

    margin: 18px 0 0;

    font-size: 16px;
    line-height: 1.7;
  }

  .top-care__artmake-button {
    order: 6;

    width: 100%;
    min-height: 52px;

    margin: 26px 0 0;

    font-size: 16px;
  }

	
	 /* 06だけ画面幅いっぱい */
  .top-care .l-inner {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  /* 小児眼科 */
  .top-care__child {
    border-radius: 0;
  }

  /* コンタクトレンズ */
  .top-care__contact {
    border-radius: 0;
  }

  /* 医療アートメイク */
  .top-care__artmake {
    border-radius: 0;
  }
}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-care__child,
  .top-care__contact,
  .top-care__artmake {
    padding: 40px 16px;
  }

  .top-care__child-title,
  .top-care__contact-title {
    font-size: 23px;
  }

  .top-care__child-photo,
  .top-care__contact-photo {
    max-width: 280px;
  }

  .top-care__contact-list li {
    font-size: 15px;
  }

  .top-care__artmake-title {
    font-size: 28px;
  }

  .top-care__artmake-en {
    font-size: 34px;
  }

}

/* ==================================================
   07: 地域の皆さまに選ばれる7つの特徴
================================================== */

.top-features {
  width: 100%;
  padding: 120px 0 0;
}


/* 見出し
-------------------------------------------------- */

.top-features__heading {
  text-align: center;
}

.top-features__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.45;
}

.top-features__line {
  display: block;

  width: 220px;
  height: 2px;

  margin: 24px auto 0;

  background-color: #C6A86A;
}

.top-features__lead {
  margin: 28px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;

  text-align: center;
}


/* カード一覧
-------------------------------------------------- */

.top-features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 48px 40px;

  margin-top: 64px;
}


/* カード
-------------------------------------------------- */

.top-features__card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 280px;

  padding: 40px 32px;

  color: inherit;
  background-color: #FFFFFF;

  border: 1px solid #E3F0FA;
  border-radius: 24px;

  box-shadow: 0 6px 18px rgba(31, 54, 86, 0.10);
}

a.top-features__card {
  text-decoration: none;
}

.top-features__content {
  width: 100%;
  min-width: 0;
}

.top-features__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100px;
  height: 90px;

  flex-shrink: 0;
}

.top-features__icon img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;
}

.top-features__card-title {
  width: 100%;

  margin: 24px 0 0;

  color: #2E5EA7;

  font-family: var(--font-ja);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;

  text-align: center;
}

.top-features__text {
  width: 100%;

  margin: 20px 0 0;

  color: #1F3656;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;

  text-align: left;
}


/* YouTube
-------------------------------------------------- */

.top-features__card--youtube {
  padding-bottom: 40px;
}

.top-features__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;

  color: #559EEC;

  
    width: 15px;
  
}


/* 下部テキスト
-------------------------------------------------- */

.top-features__bottom-text {
  margin: 64px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;

  text-align: center;
}


/* ボタン
-------------------------------------------------- */

.top-features__button-wrap {
  display: flex;
  justify-content: center;

  margin-top: 40px;
}

.top-features__button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  width: 260px;
  min-height: 56px;

  padding: 0 22px 0 34px;

  color: #2E5EA7;
  background-color: #FFFFFF;

  border: 2px solid #559EEC;
  border-radius: 20px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}

.top-features__button-arrow {
  color: #559EEC;

   width: 15px;
}


/* Hover
-------------------------------------------------- */

@media (hover: hover) {

  .top-features__card--youtube {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .top-features__card--youtube:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 24px rgba(31, 54, 86, 0.14);
  }

  .top-features__arrow,
  .top-features__button-arrow {
    transition: transform 0.3s ease;
  }

  .top-features__card--youtube:hover .top-features__arrow,
  .top-features__button:hover .top-features__button-arrow {
    transform: translateX(4px);
  }

  .top-features__button {
    transition:
      color 0.3s ease,
      background-color 0.3s ease;
  }

  .top-features__button:hover {
    color: #FFFFFF;
    background-color: #559EEC;
  }

  .top-features__button:hover .top-features__button-arrow {
    color: #FFFFFF;
  }

}


/* Middle
-------------------------------------------------- */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-features__title {
    font-size: 34px;
  }

  .top-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 32px;

    margin-top: 56px;
  }

  .top-features__card {
    min-height: 280px;

    padding: 40px 32px;
  }

  .top-features__card--youtube {
    padding-bottom: 40px;
  }

  .top-features__icon {
    width: 92px;
    height: 84px;
  }

  .top-features__card-title {
    font-size: 18px;
  }

  .top-features__text {
    font-size: 16px;
  }

}


/* Tablet
-------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-features {
    padding: 80px 0;
  }

  .top-features__title {
    font-size: 32px;
  }

  .top-features__lead {
    font-size: 17px;
  }

  .top-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 56px;
  }

  .top-features__card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;

    min-height: 190px;

    padding: 40px;

    column-gap: 28px;
  }

  .top-features__card--youtube {
    padding: 40px;
  }

  .top-features__icon {
    width: 100px;
    height: 90px;
  }

  .top-features__card-title {
    margin: 0;

    font-size: 18px;
    line-height: 1.5;

    text-align: left;
  }

  .top-features__text {
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.7;

    text-align: left;
  }

  .top-features__arrow {
    right: 20px;
    bottom: 20px;
  }

  .top-features__bottom-text {
    margin-top: 56px;

    font-size: 17px;
  }

}


/* Smartphone
-------------------------------------------------- */

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

  .top-features {
    padding: 80px 0 0;
  }

  .top-features__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .top-features__line {
    width: 140px;

    margin-top: 20px;
  }

  .top-features__lead {
    margin-top: 24px;

    font-size: 16px;
    line-height: 1.75;

    text-align: left;
  }


  /* 1列 */

  .top-features__grid {
    grid-template-columns: 1fr;

    gap: 16px;

    margin-top: 40px;
  }


  /* 横長カード */

  .top-features__card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;

    min-height: 0;

    padding: 40px 20px;

    column-gap: 24px;

    border-radius: 20px;
  }

  .top-features__card--youtube {
    padding: 40px 48px 40px 20px;
  }

  .top-features__icon {
    width: 72px;
    height: 68px;
  }

  .top-features__content {
    min-width: 0;
  }

  .top-features__card-title {
    margin: 0;

    font-size: 17px;
    line-height: 1.5;

    text-align: left;
  }

  .top-features__text {
    margin-top: 12px;

    font-size: 16px;
    line-height: 1.65;

    text-align: left;
  }

  .top-features__arrow {
    right: 16px;
    bottom: 16px;

   width: 15px;
  }


  /* 下部 */

  .top-features__bottom-text {
    margin-top: 40px;

    font-size: 16px;
    line-height: 1.75;

    text-align: left;
  }

  .top-features__button-wrap {
    margin-top: 32px;
  }

  .top-features__button {
    width: 100%;
    min-height: 52px;

    padding: 0 20px 0 24px;

    font-size: 16px;
  }

  .top-features__button-arrow {
     width: 15px;
  }

}


/* Small Smartphone
-------------------------------------------------- */

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

  .top-features__title {
    font-size: 24px;
  }

  .top-features__card {
    grid-template-columns: 62px minmax(0, 1fr);

    padding: 40px 16px;

    column-gap: 18px;
  }

  .top-features__card--youtube {
    padding: 40px 44px 40px 16px;
  }

  .top-features__icon {
    width: 62px;
    height: 60px;
  }

  .top-features__card-title {
    font-size: 16px;
  }

  .top-features__text {
    font-size: 15px;
  }

}

/* ==================================================
   08: 

気になる症状から探す
================================================== */

.top-symptoms {
  width: 100%;
  padding: 120px 0 0;
}


/* 見出し
-------------------------------------------------- */

.top-symptoms__heading {
  text-align: center;
}

.top-symptoms__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.45;
}

.top-symptoms__line {
  display: block;

  width: 220px;
  height: 2px;

  margin: 24px auto 0;

  background-color: #C6A86A;
}


/* リード
-------------------------------------------------- */

.top-symptoms__lead {
  margin: 32px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;

  text-align: left;
}


/* カード一覧
-------------------------------------------------- */

.top-symptoms__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 28px 32px;

  margin-top: 64px;
}


/* カード
-------------------------------------------------- */

.top-symptoms__card {
  position: relative;

  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);

  min-width: 0;
  min-height: 182px;

  overflow: hidden;

  color: inherit;
  background-color: #FFFFFF;

  border: 1px solid #E8DFD2;
  border-radius: 20px;

  box-shadow: 0 5px 14px rgba(31, 54, 86, 0.06);

  text-decoration: none;
}

.top-symptoms__image {
  width: 88px;
  height: 100%;

  overflow: hidden;
}

.top-symptoms__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.top-symptoms__content {
  min-width: 0;

  padding: 20px 5px 44px 10px;
}

.top-symptoms__card-title {
  margin: 0;

  color: #2E5EA7;

  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

.top-symptoms__text {
  margin: 14px 0 0;

  color: #1F3656;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;

  text-align: left;
}

.top-symptoms__arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;

  display: block;

  width: 15px;
  height: auto;
}


/* Hover
-------------------------------------------------- */

@media (hover: hover) {

  .top-symptoms__card {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .top-symptoms__card:hover {
    transform: translateY(-3px);

    box-shadow: 0 9px 22px rgba(31, 54, 86, 0.10);
  }

  .top-symptoms__arrow {
    transition: transform 0.3s ease;
  }

  .top-symptoms__card:hover .top-symptoms__arrow {
    transform: translate(2px, -2px);
  }

}


/* Middle
-------------------------------------------------- */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-symptoms__title {
    font-size: 34px;
  }

  .top-symptoms__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin-top: 56px;
  }

  .top-symptoms__card {
    grid-template-columns: 105px minmax(0, 1fr);

    min-height: 182px;
  }

  .top-symptoms__image {
    width: 105px;
  }

  .top-symptoms__content {
    padding: 24px 22px 44px;
  }

}


/* Tablet
-------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-symptoms {
    padding: 80px 0;
  }

  .top-symptoms__title {
    font-size: 32px;
  }

  .top-symptoms__lead {
    font-size: 17px;
    line-height: 1.75;
  }

  .top-symptoms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 56px;
  }

  .top-symptoms__card {
    grid-template-columns: 104px minmax(0, 1fr);

    min-height: 178px;
  }

  .top-symptoms__image {
    width: 104px;
  }

  .top-symptoms__content {
    padding: 24px 24px 44px;
  }

  .top-symptoms__card-title {
    font-size: 18px;
  }

  .top-symptoms__text {
    margin-top: 12px;

    font-size: 17px;
    line-height: 1.65;
  }

  .top-symptoms__arrow {
    right: 20px;
    bottom: 18px;

    width: 15px;
  }

}


/* Smartphone
-------------------------------------------------- */

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

  .top-symptoms {
    padding: 80px 0 0;
  }

  .top-symptoms__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .top-symptoms__line {
    width: 140px;

    margin-top: 20px;
  }

  .top-symptoms__lead {
    margin-top: 24px;

    font-size: 16px;
    line-height: 1.75;
  }


  /* カード一覧 */

  .top-symptoms__grid {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: 40px;
  }


  /* カード */

  .top-symptoms__card {
    grid-template-columns: 96px minmax(0, 1fr);

    min-height: 128px;

    border-radius: 26px;
  }

  .top-symptoms__image {
    width: 96px;
    height: 100%;
  }

  .top-symptoms__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 5px 44px 12px;
  }

  .top-symptoms__card-title {
    font-size: 17px;
    line-height: 1.45;
  }

  .top-symptoms__text {
    margin-top: 8px;

    font-size: 16px;
    line-height: 1.6;
  }

  .top-symptoms__arrow {
    right: 16px;
    bottom: 16px;

    width: 15px;
  }

}


/* Small Smartphone
-------------------------------------------------- */

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

  .top-symptoms__title {
    font-size: 24px;
  }

  .top-symptoms__card {
    grid-template-columns: 86px minmax(0, 1fr);

    min-height: 124px;
  }

  .top-symptoms__image {
    width: 86px;
  }

  .top-symptoms__content {
    padding: 18px 38px 18px 16px;
  }

  .top-symptoms__card-title {
    font-size: 16px;
  }

  .top-symptoms__text {
    font-size: 15px;
  }

  .top-symptoms__arrow {
    right: 14px;
    bottom: 14px;
  }

}

/* ==================================================
   09: 診療案内
================================================== */

.top-medical {
  width: 100%;
  padding: 120px 0 0;
}


/* 見出し
-------------------------------------------------- */

.top-medical__heading {
  text-align: center;
}

.top-medical__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.45;
}

.top-medical__line {
  display: block;

  width: 220px;
  height: 2px;

  margin: 24px auto 0;

  background-color: #C6A86A;
}


/* リード
-------------------------------------------------- */

.top-medical__lead {
  margin: 32px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;

  text-align: left;
}


/* カード一覧
-------------------------------------------------- */

.top-medical__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 28px 32px;

  margin-top: 64px;
}


/* カード
-------------------------------------------------- */

.top-medical__card {
  position: relative;

  display: block;

  min-width: 0;
  min-height: 190px;

  padding: 32px 12px 48px 20px;

  color: inherit;
  background-color: #FFFFFF;

  border: 1px solid #E1EDF7;
  border-radius: 24px;

  box-shadow: 0 5px 14px rgba(31, 86, 140, 0.08);

  text-decoration: none;
}

.top-medical__card-title {
  margin: 0;

  color: #2E5EA7;

  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

.top-medical__card-line {
  display: block;

  width: 82px;
  height: 1px;

  margin-top: 18px;

  background-color: #86B4E5;
}

.top-medical__text {
  margin: 20px 0 0;

  color: #1F3656;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;

  text-align: left;
}

.top-medical__arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;

  display: block;

  width: 15px;
  height: auto;
}


/* Hover
-------------------------------------------------- */

@media (hover: hover) {

  .top-medical__card {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .top-medical__card:hover {
    transform: translateY(-3px);

    box-shadow: 0 9px 22px rgba(31, 86, 140, 0.12);
  }

  .top-medical__arrow {
    transition: transform 0.3s ease;
  }

  .top-medical__card:hover .top-medical__arrow {
    transform: translate(2px, -2px);
  }

}


/* Middle
-------------------------------------------------- */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-medical__title {
    font-size: 34px;
  }

  .top-medical__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin-top: 56px;
  }

  .top-medical__card {
    min-height: 190px;

    padding: 32px 24px 48px;

    border-radius: 24px;
  }

}


/* Tablet
-------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-medical {
    padding: 80px 0;
  }

  .top-medical__title {
    font-size: 32px;
  }

  .top-medical__lead {
    font-size: 17px;
    line-height: 1.75;
  }

  .top-medical__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 56px;
  }

  .top-medical__card {
    min-height: 180px;

    padding: 32px 24px 48px;

    border-radius: 24px;
  }

  .top-medical__card-title {
    font-size: 19px;
  }

  .top-medical__text {
    font-size: 17px;
    line-height: 1.65;
  }

  .top-medical__arrow {
    right: 20px;
    bottom: 18px;

    width: 15px;
  }

}


/* Smartphone
-------------------------------------------------- */

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

  .top-medical {
    padding: 80px 0 0;
  }

  .top-medical__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .top-medical__line {
    width: 140px;

    margin-top: 20px;
  }

  .top-medical__lead {
    margin-top: 24px;

    font-size: 16px;
    line-height: 1.75;
  }


  /* カード一覧 */

  .top-medical__grid {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: 40px;
  }


  /* カード */

  .top-medical__card {
    min-height: 0;

    padding: 20px ２２0px 20px 20px;

    border-radius: 24px;
  }

  .top-medical__card-title {
    font-size: 17px;
    line-height: 1.45;
  }

  .top-medical__card-line {
    width: 72px;

    margin-top: 12px;
  }

  .top-medical__text {
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.6;
  }

  .top-medical__arrow {
    right: 16px;
    bottom: 16px;

    width: 15px;
  }

}


/* Small Smartphone
-------------------------------------------------- */

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

  .top-medical__title {
    font-size: 24px;
  }

  .top-medical__card {
    padding: 20px 38px 20px 16px;

    border-radius: 24px;
  }

  .top-medical__card-title {
    font-size: 16px;
  }

  .top-medical__text {
    font-size: 15px;
  }

  .top-medical__arrow {
    right: 14px;
    bottom: 14px;
  }

}

/* ==================================================
   10: 季節ごとの目のお悩み
================================================== */

.top-season {
  width: 100%;
  padding: 120px 0 0;
}


/* 見出し
-------------------------------------------------- */

.top-season__heading {
  text-align: center;
}

.top-season__title {
  margin: 0;

  color: #0C3D7D;

  font-family: var(--font-ja);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.45;
}

.top-season__line {
  display: block;

  width: 220px;
  height: 2px;

  margin: 24px auto 0;

  background-color: #C6A86A;
}


/* リード
-------------------------------------------------- */

.top-season__lead {
  margin: 32px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;

  text-align: left;
}


/* カード一覧
-------------------------------------------------- */

.top-season__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 28px 36px;

  margin-top: 64px;
}


/* カード
-------------------------------------------------- */

.top-season__card {
  display: grid;
  grid-template-columns: 162px minmax(0, 1fr);

  min-width: 0;
  min-height: 260px;

  overflow: hidden;

  border-radius: 24px;

  box-shadow: 0 5px 14px rgba(31, 54, 86, 0.06);
}


/* 季節別背景 */

.top-season__card--spring {
  background-color: #FFF5F7;
}

.top-season__card--summer {
  background-color: #FFFEEF;
}

.top-season__card--autumn {
  background-color: #FFF8EE;
}

.top-season__card--winter {
  background-color: #F3FAFE;
}


/* 写真
-------------------------------------------------- */

.top-season__visual {
  position: relative;

  width: 162px;
  height: 100%;

  overflow: hidden;
}

.top-season__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* 季節バッジ
-------------------------------------------------- */

.top-season__badge {
  position: absolute;
  top: 28px;
  left: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100px;
  height: 100px;

  color: #FFFFFF;

  border-radius: 50%;

  transform: translateX(-50%);
}

.top-season__badge--spring {
  background-color: #F77C9D;
}

.top-season__badge--summer {
  background-color: #68B700;
}

.top-season__badge--autumn {
  background-color: #FF9800;
}

.top-season__badge--winter {
  background-color: #3491C5;
}

.top-season__name {
  display: block;

  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}

.top-season__months {
  display: block;

  margin-top: 4px;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}


/* 本文
-------------------------------------------------- */

.top-season__content {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 28px 28px 22px 30px;
}

.top-season__card-title {
  margin: 0;

  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
}

.top-season__card--spring .top-season__card-title,
.top-season__card--spring .top-season__link {
  color: #F26F91;
}

.top-season__card--summer .top-season__card-title,
.top-season__card--summer .top-season__link {
  color: #63AD00;
}

.top-season__card--autumn .top-season__card-title,
.top-season__card--autumn .top-season__link {
  color: #F28B00;
}

.top-season__card--winter .top-season__card-title,
.top-season__card--winter .top-season__link {
  color: #2987BC;
}

.top-season__text {
  margin: 12px 0 0;

  color: #1F3656;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}


/* リンク
-------------------------------------------------- */

.top-season__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 8px;

  margin-top: auto;
  padding-top: 10px;
}

.top-season__link {
  display: grid;
  grid-template-columns: auto 15px;
  align-items: center;

  gap: 22px;

  min-width: 190px;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;

  text-decoration: none;
}

.top-season__link span {
  text-align: right;
}

.top-season__arrow {
  display: block;

  width: 15px;
  height: auto;
}


/* Hover
-------------------------------------------------- */

@media (hover: hover) {

  .top-season__link {
    transition: opacity 0.3s ease;
  }

  .top-season__link:hover {
    opacity: 0.7;
  }

  .top-season__arrow {
    transition: transform 0.3s ease;
  }

  .top-season__link:hover .top-season__arrow {
    transform: translate(2px, -2px);
  }

}


/* Middle
-------------------------------------------------- */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-season__title {
    font-size: 34px;
  }

  .top-season__grid {
    gap: 24px;

    margin-top: 56px;
  }

  .top-season__card {
    grid-template-columns: 140px minmax(0, 1fr);

    min-height: 290px;
  }

  .top-season__visual {
    width: 140px;
  }

  .top-season__badge {
    width: 90px;
    height: 90px;
  }

  .top-season__name {
    font-size: 28px;
  }

  .top-season__content {
    padding: 26px 20px 20px;
  }

  .top-season__card-title {
    font-size: 20px;
  }

  .top-season__text {
    font-size: 17px;
  }

}


/* Tablet
-------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-season {
    padding: 80px 0;
  }

  .top-season__title {
    font-size: 32px;
  }

  .top-season__lead {
    font-size: 17px;
    line-height: 1.75;
  }

  .top-season__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 56px;
  }

  .top-season__card {
    grid-template-columns: 128px minmax(0, 1fr);

    min-height: 360px;

    border-radius: 24px;
  }

  .top-season__visual {
    width: 128px;
  }

  .top-season__badge {
    top: 26px;

    width: 84px;
    height: 84px;
  }

  .top-season__name {
    font-size: 26px;
  }

  .top-season__months {
    font-size: 13px;
  }

  .top-season__content {
    padding: 24px 18px 20px;
  }

  .top-season__card-title {
    font-size: 19px;
  }

  .top-season__text {
    margin-top: 12px;

    font-size: 17px;
    line-height: 1.65;
  }

  .top-season__link {
    min-width: 0;

    font-size: 16px;
  }

}


/* Smartphone
-------------------------------------------------- */

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

  .top-season {
    padding: 80px 0 0;
  }

  .top-season__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .top-season__line {
    width: 140px;

    margin-top: 20px;
  }

  .top-season__lead {
    margin-top: 24px;

    font-size: 16px;
    line-height: 1.75;
  }


  /* カード一覧 */

  .top-season__grid {
    grid-template-columns: 1fr;

    gap: 16px;

    margin-top: 40px;
  }


  /* カード */

  .top-season__card {
    grid-template-columns: 108px minmax(0, 1fr);

    min-height: 0;

    border-radius: 24px;
  }

  .top-season__visual {
    width: 108px;
  }

  .top-season__badge {
    top: 20px;

    width: 78px;
    height: 78px;
  }

  .top-season__name {
    font-size: 25px;
  }

  .top-season__months {
    margin-top: 2px;

    font-size: 12px;
  }

  .top-season__content {
    padding: 20px;
  }

  .top-season__card-title {
    font-size: 17px;
    line-height: 1.45;
  }

  .top-season__text {
    margin-top: 10px;

    font-size: 16px;
    line-height: 1.6;
  }


  /* SPはリンクをすべて縦並び */

  .top-season__links {
    align-items: stretch;

    gap: 6px;

    margin-top: 14px;
    padding-top: 0;
  }

  .top-season__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15px;

    width: 100%;
    min-width: 0;

    gap: 12px;

    font-size: 15px;
  }

  .top-season__link span {
    text-align: right;
  }

  .top-season__arrow {
    width: 15px;
  }

}


/* Small Smartphone
-------------------------------------------------- */

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

  .top-season__title {
    font-size: 24px;
  }

  .top-season__card {
    grid-template-columns: 96px minmax(0, 1fr);

    border-radius: 24px;
  }

  .top-season__visual {
    width: 96px;
  }

  .top-season__badge {
    width: 70px;
    height: 70px;
  }

  .top-season__name {
    font-size: 23px;
  }

  .top-season__months {
    font-size: 11px;
  }

  .top-season__content {
    padding: 20px;
  }

  .top-season__card-title {
    font-size: 16px;
  }

  .top-season__text {
    font-size: 15px;
  }

  .top-season__link {
    font-size: 14px;
  }

}



/* ==================================================
   11: 動画でわかる眼科
================================================== */

.top-youtube {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background-image:
    url("/wp-content/uploads/2026/09/top-youtube-bg-scaled.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	margin-top:120px;
}


/* ------------------------------------------
   Heading
------------------------------------------ */

.top-youtube__heading {
  text-align: center;
}

.top-youtube__heading-title {
  margin: 0;
  color: #0C3D7D;
  font-family: var(--font-ja);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.top-youtube__heading-line {
  display: block;
  width: 32px;
  height: 1px;
  margin: 14px auto 18px;
  background-color: #C6A86A;
}

.top-youtube__lead {
  margin: 0;
  color: #1F3656;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}


/* ------------------------------------------
   Slider
------------------------------------------ */

.top-youtube__slider {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
}

.top-youtube__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.top-youtube__track::-webkit-scrollbar {
  display: none;
}


/* ------------------------------------------
   Item
------------------------------------------ */

.top-youtube__item {
  flex: 0 0 220px;
  min-width: 220px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.top-youtube__thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #FFFFFF;
}

.top-youtube__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.top-youtube__title {
  margin: 18px 0 0;
  color: #1F3656;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

@media (hover: hover) {

  .top-youtube__item:hover .top-youtube__thumb img {
    transform: scale(1.04);
  }

}


/* ------------------------------------------
   YouTube Button
------------------------------------------ */

.top-youtube__button-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.top-youtube__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 300px;
  min-height: 64px;
  padding: 14px 28px;
  color: #2C2C2C;
  background-color: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 16px;
  box-shadow: 0 5px 14px rgba(31, 54, 86, 0.12);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.top-youtube__button-icon {
  display: block;
  width: 34px;
  height: auto;
}

.top-youtube__button-text {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

@media (hover: hover) {

  .top-youtube__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(31, 54, 86, 0.16);
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-youtube {
    padding: 80px 0;
  }

  .top-youtube__heading-title {
    font-size: 28px;
  }

  .top-youtube__lead {
    font-size: 17px;
  }

  .top-youtube__track {
    gap: 20px;
  }

  .top-youtube__item {
    flex-basis: 210px;
    min-width: 210px;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-youtube {
    padding: 80px 0;
	  margin-top:80px;
  }

  .top-youtube__heading-title {
    font-size: 26px;
  }

  .top-youtube__heading-line {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .top-youtube__lead {
    font-size: 16px;
    line-height: 1.8;
  }


  /* Slider */

  .top-youtube__slider {
    overflow: hidden;
    width: 100%;
    margin-top: 32px;
  }

  .top-youtube__track {
    gap: 16px;
    padding-top: 0;
    padding-right: 14%;
    padding-bottom: 8px;
    padding-left: 14%;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14%;
  }

  .top-youtube__item {
    flex: 0 0 72%;
    min-width: 72%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .top-youtube__title {
    margin-top: 14px;
    font-size: 16px;
  }


  /* Button */

  .top-youtube__button-wrap {
    margin-top: 32px;
  }

  .top-youtube__button {
    min-width: 280px;
    min-height: 60px;
    padding: 12px 24px;
  }

  .top-youtube__button-icon {
    width: 32px;
  }

  .top-youtube__button-text {
    font-size: 17px;
  }

}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-youtube__item {
    flex-basis: 78%;
    min-width: 78%;
  }

  .top-youtube__button {
    min-width: 260px;
  }

}


/* ==================================================
   12: 

よくある質問
================================================== */

.top-faq {
  padding: 120px 0;
  background-color: #FFFFFF;
}

/* ------------------------------------------
   TOP FAQ Icon Layout
------------------------------------------ */

.top-faq .faq-item__question {
  grid-template-columns: minmax(0, 1fr) 92px 28px;
}

.top-faq .faq-item__icon {
  display: block;
  width: 92px;
  height: 92px;
  margin-left: 0;
  object-fit: contain;
}



/* ------------------------------------------
   Heading
------------------------------------------ */

.top-faq__heading {
  text-align: center;
}

.top-faq__heading-title {
  margin: 0;
  color: #0C3D7D;
  font-family: var(--font-ja);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.top-faq__heading-line {
  display: block;
  width: 220px;
  height: 2px;
  margin: 24px auto 0;
  background-color: #C6A86A;
}





/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-faq {
    padding: 80px 0;
  }
	
	.top-faq .faq-item__question {
    grid-template-columns: minmax(0, 1fr) 72px 28px;
  }

  .top-faq .faq-item__icon {
    width: 72px;
    height: 72px;
  }

  .top-faq__heading-title {
    font-size: 32px;
  }

  .top-faq__heading-line {
    width: 180px;
    margin-top: 20px;
  }

  

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-faq {
    padding: 80px 0;
  }
	
	.top-faq .faq-item__question {
    grid-template-columns: minmax(0, 1fr) 52px 24px;
    gap: 5px;
  }

  .top-faq .faq-item__icon {
    width: 52px;
    height: 52px;
  }

  .top-faq__heading-title {
    font-size: 28px;
  }

  .top-faq__heading-line {
    width: 140px;
    height: 1px;
    margin-top: 18px;
  }

 
}

/* ==================================================
   13:

Instagram
================================================== */

.top-instagram {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background-image: url("/wp-content/uploads/2026/09/top-artmake-bg2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


/* ------------------------------------------
   Heading
------------------------------------------ */

.top-instagram__heading {
  text-align: center;
}

.top-instagram__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.top-instagram__icon {
  display: block;
  width: 36px;
  height: 36px;
  color: #5C6670;
}

.top-instagram__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.top-instagram__icon-dot {
  fill: currentColor;
  stroke: none;
}

.top-instagram__title {
  margin: 0;
  color: #328C8B;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.top-instagram__account {
  display: inline-block;
  margin-top: 24px;
  color: #D49A38;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.top-instagram__account:hover {
  opacity: 0.75;
}

.top-instagram__lead {
  margin: 32px 0 0;
  color: #4A5563;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}


/* ------------------------------------------
   Feed
------------------------------------------ */

.top-instagram__feed {
  width: 100%;
  margin-top: 64px;
}

.top-instagram__feed #sb_instagram {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}


/* ------------------------------------------
   Feed Layout
------------------------------------------ */

.top-instagram__feed #sbi_images {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start;
  gap: 32px !important;
  width: 100% !important;
  padding: 0 !important;
}


/* ------------------------------------------
   Post
------------------------------------------ */

.top-instagram__feed #sbi_images .sbi_item {
  float: none !important;
  clear: none !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  min-width: 0 !important;
  max-width: 210px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ------------------------------------------
   Image
------------------------------------------ */

.top-instagram__feed .sbi_photo_wrap {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.top-instagram__feed .sbi_photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-position: center !important;
  background-size: cover !important;
}

.top-instagram__feed .sbi_photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}


/* ------------------------------------------
   Plugin Header
------------------------------------------ */

.top-instagram__feed .sb_instagram_header,
.top-instagram__feed .sbi_header_text,
.top-instagram__feed .sbi_bio {
  display: none !important;
}


/* ------------------------------------------
   Caption / Meta
------------------------------------------ */

.top-instagram__feed .sbi_caption,
.top-instagram__feed .sbi_info,
.top-instagram__feed .sbi_meta,
.top-instagram__feed .sbi_expand,
.top-instagram__feed .sbi_hover_bottom,
.top-instagram__feed .sbi_hover_top {
  display: none !important;
}


/* ------------------------------------------
   Buttons
------------------------------------------ */

.top-instagram__feed #sbi_load {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}


/* さらに読み込む */

.top-instagram__feed #sbi_load .sbi_load_btn {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 200px;
  min-height: 52px;
  margin: 0 !important;
  padding: 12px 24px !important;

  color: #FFFFFF !important;
  background: #B7B4AD !important;
  background-color: #B7B4AD !important;

  border: 0 !important;
  border-radius: 8px !important;

  font-family: var(--font-ja);
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;

  box-shadow: none !important;
  text-decoration: none !important;
}

.top-instagram__feed #sbi_load .sbi_load_btn:hover {
  background: #A8A59E !important;
  background-color: #A8A59E !important;
}


/* Instagramでフォロー */

.top-instagram__feed #sbi_load .sbi_follow_btn {
  float: none !important;
  display: block !important;
  margin: 0 !important;
}

.top-instagram__feed #sbi_load .sbi_follow_btn a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 240px;
  min-height: 52px;
  margin: 0 !important;
  padding: 12px 24px !important;

  color: #FFFFFF !important;
  background: #C6A86A !important;
  background-color: #C6A86A !important;

  border: 0 !important;
  border-radius: 8px !important;

  font-family: var(--font-ja);
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;

  box-shadow: none !important;
  text-decoration: none !important;
}

.top-instagram__feed #sbi_load .sbi_follow_btn a:hover {
  background: #B79A5C !important;
  background-color: #B79A5C !important;
}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-instagram {
    padding: 80px 0;
  }

  .top-instagram__title {
    font-size: 30px;
  }

  .top-instagram__icon {
    width: 34px;
    height: 34px;
  }

  .top-instagram__account {
    margin-top: 20px;
  }

  .top-instagram__lead {
    margin-top: 28px;
    font-size: 17px;
  }

  .top-instagram__feed {
    margin-top: 48px;
  }


  /* 2列・画像を大きくしすぎない */

  .top-instagram__feed #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(2, 260px) !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  .top-instagram__feed #sbi_images .sbi_item {
    width: 260px !important;
    max-width: 260px !important;
  }


  /* Buttons */

  .top-instagram__feed #sbi_load {
    margin-top: 32px !important;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-instagram {
    padding: 80px 0;
  }


  /* Heading */

  .top-instagram__title-wrap {
    gap: 10px;
  }

  .top-instagram__icon {
    width: 30px;
    height: 30px;
  }

  .top-instagram__title {
    font-size: 28px;
  }

  .top-instagram__account {
    margin-top: 16px;
    font-size: 14px;
  }

  .top-instagram__lead {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
  }


  /* Feed */

  .top-instagram__feed {
    width: 100%;
    margin-top: 40px;
  }


  /* 2列 */

  .top-instagram__feed #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .top-instagram__feed #sbi_images .sbi_item {
    float: none !important;
    clear: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* Image */

  .top-instagram__feed .sbi_photo_wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1;
  }

  .top-instagram__feed .sbi_photo {
    width: 100% !important;
    height: 100% !important;
  }

  .top-instagram__feed .sbi_photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }


  /* Buttons */

  .top-instagram__feed #sbi_load {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  /* さらに読み込む */
.top-instagram__feed #sbi_load .sbi_load_btn {
  width: auto !important;
  min-width: 180px !important;
  min-height: 48px;
  padding: 10px 24px !important;
}

/* Instagramでフォロー */
.top-instagram__feed #sbi_load .sbi_follow_btn a {
  width: 100%;
  max-width: 280px;
  min-width: 0;
  min-height: 52px;
}

}

/* ==================================================
   14: 

診療時間
================================================== */

.top-hours {
  padding: 120px 0;
}


/* ------------------------------------------
   Panel
------------------------------------------ */

.top-hours__panel {
  padding: 72px 40px 64px;
  background-color: #FEFCF9;
  border: 1px solid #E1EDF7;
  border-radius: 24px;
  box-shadow: 0 5px 14px rgba(31, 86, 140, 0.08);
}


/* ------------------------------------------
   Heading
------------------------------------------ */

.top-hours__title {
  margin: 0;
  color: #0C3D7D;
  font-family: var(--font-ja);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.top-hours__title-line {
  display: block;
  width: 220px;
  height: 2px;
  margin: 16px auto 0;
  background-color: #C6A86A;
}


/* ------------------------------------------
   Body
------------------------------------------ */

.top-hours__body {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 480px);
  justify-content: center;
  gap: 120px;
  margin-top: 64px;
}


/* ------------------------------------------
   Main
------------------------------------------ */

.top-hours__main {
  min-width: 0;
}


/* ------------------------------------------
   Table
   表本体は .top-info__hours-table を共通使用
------------------------------------------ */

.top-hours__table-wrap {
  width: 100%;
}


/* ------------------------------------------
   Guide
------------------------------------------ */

.top-hours__guide {
  margin-top: 16px;
  color: #1F3656;
  font-family: var(--font-ja);
  font-size: 18px;
  line-height: 1.65;
}

.top-hours__guide p {
  margin: 0;
}

.top-hours__guide-title {
  margin-bottom: 2px !important;
}


/* ------------------------------------------
   Buttons
------------------------------------------ */

.top-hours__buttons {
  width: 410px;
  max-width: 100%;
  margin: 32px auto 0;
}

.top-hours__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 104px;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--font-ja);
  text-decoration: none;
}

.top-hours__button + .top-hours__button {
  margin-top: 24px;
}


/* Phone */

.top-hours__button--phone {
  color: #3169B3;
  background-color: #FFFFFF;
  border: 2px solid #5899E6;
}

.top-hours__phone-icon {
  flex: 0 0 auto;
  margin-right: 16px;
}

.top-hours__phone-icon img {
  display: block;
  width: auto;
  height: 34px;
  border-radius: 0;
  object-fit: contain;
}


/* WEB */

.top-hours__button--web {
  color: #FFFFFF;
  background-color: #FFAA32;
}

.top-hours__calendar {
  flex: 0 0 auto;
  margin-right: 16px;
}

.top-hours__calendar img {
  display: block;
  width: auto;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
}


/* Text */

.top-hours__button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-hours__button-content strong {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
}

.top-hours__button-content small {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}


/* ------------------------------------------
   Reservation
------------------------------------------ */

.top-hours__reservation {
  min-width: 0;
  padding-top: 34px;
}

.top-hours__reservation-title {
  margin: 0;
  color: #1F3656;
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.top-hours__reservation-text {
  margin-top: 32px;
  color: #1F3656;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.top-hours__reservation-text p {
  margin: 0;
}

.top-hours__reservation-text p + p {
  margin-top: 28px;
}

.top-hours__reservation-red {
  color: #E53935;
}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-hours {
    padding: 80px 0;
  }

  .top-hours__panel {
    padding: 64px 40px;
  }

  .top-hours__title {
    font-size: 32px;
  }

  .top-hours__title-line {
    width: 180px;
  }

  .top-hours__body {
    grid-template-columns: 1fr;
    gap: 64px;
    width: 100%;
    max-width: 620px;
    margin: 56px auto 0;
  }

  .top-hours__guide,
  .top-hours__reservation-text {
    font-size: 17px;
  }

  .top-hours__reservation {
    padding-top: 0;
  }

  .top-hours__reservation-title {
    font-size: 22px;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-hours {
    padding: 80px 0 0;
  }

  .top-hours .top-hours__inner {
    width: 100%;
    max-width: none;
  }

  .top-hours__panel {
    width: 100%;
    padding: 56px 20px 64px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }


  /* Heading */

  .top-hours__title {
    font-size: 28px;
  }

  .top-hours__title-line {
    width: 140px;
    height: 1px;
    margin-top: 16px;
  }


  /* Body */

  .top-hours__body {
    display: block;
    margin-top: 48px;
  }


  /* Table */

  .top-hours__table-wrap {
    width: 100%;
  }


  /* Guide */

  .top-hours__guide {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.7;
  }


  /* Buttons */

  .top-hours__buttons {
    width: 100%;
    margin-top: 32px;
  }

  .top-hours__button {
    min-height: 88px;
    padding: 12px 16px;
    border-radius: 20px;
  }

  .top-hours__button + .top-hours__button {
    margin-top: 16px;
  }

  .top-hours__phone-icon {
    margin-right: 12px;
  }

  .top-hours__calendar {
    margin-right: 12px;
  }

  .top-hours__phone-icon img {
    height: 29px;
  }

  .top-hours__calendar img {
    height: 31px;
  }

  .top-hours__button-content strong {
    font-size: 28px;
  }

  .top-hours__button-content small {
    font-size: 14px;
  }


  /* Reservation */

  .top-hours__reservation {
    margin-top: 56px;
    padding-top: 0;
  }

  .top-hours__reservation-title {
    font-size: 20px;
  }

  .top-hours__reservation-text {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.8;
  }

  .top-hours__reservation-text p + p {
    margin-top: 24px;
  }

}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-hours__panel {
    padding-right: 16px;
    padding-left: 16px;
  }

  .top-hours__button-content strong {
    font-size: 26px;
  }

}

/* ==================================================
   15: 

アクセス
================================================== */

.top-access {
  padding: 120px 0;
  background-color: #F5FAFF;
}

.top-access__panel {
  width: 100%;
  padding: 72px 64px 80px;
  background-color: #FFFFFF;
  border: 1px solid #E1EDF7;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(31, 86, 140, .08);
}


/* ==================================================
   Heading
================================================== */

.top-access__heading {
  text-align: center;
}

.top-access__title {
  position: relative;
  margin: 0;
  padding-bottom: 22px;
  color: #0C3D7D;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}

.top-access__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 220px;
  height: 2px;
  background-color: #C6A86A;
  transform: translateX(-50%);
}


/* ==================================================
   Overview
================================================== */

.top-access__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: center;
  max-width: 980px;
  margin: 64px auto 0;
}

.top-access__clinic {
  min-width: 0;
}

.top-access__clinic-heading {
  text-align: center;
}

.top-access__clinic-name {
  margin: 0;
  color: #1F3656;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}

.top-access__clinic-kana {
  margin: 4px 0 0;
  color: #1F3656;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

.top-access__clinic-info {
  margin-top: 28px;
}

.top-access__clinic-info p {
  margin: 0;
  color: #1F3656;
  font-size: 18px;
  line-height: 1.8;
}

.top-access__clinic-info p + p {
  margin-top: 26px;
}

.top-access__clinic-photo {
  width: 220px;
  margin: 18px auto 0;
}

.top-access__clinic-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.top-access__map {
  width: 100%;
  overflow: hidden;
}

.top-access__map iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}


/* ==================================================
   Access Methods
================================================== */

.top-access__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  margin-top: 96px;
}

.top-access__method {
  min-width: 0;
}

.top-access__method-title {
  position: relative;
  margin: 0;
  padding-bottom: 18px;
  color: #0C3D7D;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.top-access__method-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 220px;
  height: 2px;
  background-color: #C6A86A;
  transform: translateX(-50%);
}

.top-access__method-body {
  margin-top: 30px;
}

.top-access__method-body p,
.top-access__method-body li {
  color: #1F3656;
  font-size: 18px;
  line-height: 1.8;
}

.top-access__method-body p {
  margin: 0;
}

.top-access__method-body p + p {
  margin-top: 24px;
}

.top-access__method-body strong {
  font-weight: 700;
}

.top-access__sub-title {
  margin: 0 0 20px;
  color: #2E5EA7;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.top-access__parking {
  margin-top: 56px;
}


/* ==================================================
   Bus
================================================== */

.top-access__bus-stop {
  margin-top: 24px;
}

.top-access__bus-stop strong {
  color: #2E5EA7;
}

.top-access__bus-route {
  margin-top: 24px;
}

.top-access__bus-route ul {
  margin: 4px 0 0;
  padding-left: 1.4em;
}

.top-access__bus-route li {
  margin: 0 0 10px;
}

.top-access__bus-bottom {
  display: flex;
  gap: 56px;
  align-items: flex-end;
  justify-content: center;
  margin-top: 36px;
}

.top-access__timetable {
  display: flex;
  flex: 0 0 126px;
  width: 126px;
  height: 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4F8FD4;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 2px solid #4F8FD4;
  border-radius: 20px;
  transition:
    color .25s ease,
    background-color .25s ease;
}

.top-access__timetable:hover {
  color: #FFFFFF;
  background-color: #4F8FD4;
}

.top-access__bus-photo {
  width: 160px;
}

.top-access__bus-photo img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==================================================
   Middle
================================================== */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-access__panel {
    padding-right: 40px;
    padding-left: 40px;
  }

  .top-access__overview {
    gap: 56px;
  }

  .top-access__methods {
    gap: 56px;
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-access {
    padding: 80px 0;
  }

  .top-access__panel {
    padding: 64px 40px;
  }

  .top-access__title {
    font-size: 34px;
  }

  .top-access__overview {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 620px;
    margin-top: 56px;
  }

  .top-access__clinic {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  .top-access__clinic-info p {
    font-size: 17px;
  }

  .top-access__map iframe {
    height: 400px;
  }

  .top-access__methods {
    grid-template-columns: 1fr;
    gap: 72px;
    max-width: 620px;
    margin: 80px auto 0;
  }

  .top-access__method-body p,
  .top-access__method-body li {
    font-size: 17px;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-access {
    padding: 80px 0 0;
    background-color: #F5FAFF;
  }

  .top-access .top-access__inner {
    width: 100%;
    max-width: none;
  }

  .top-access__panel {
    width: 100%;
    padding: 56px 20px 64px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .top-access__title {
    padding-bottom: 18px;
    font-size: 28px;
  }

  .top-access__title::after {
    width: 160px;
  }


  /* Overview */

  .top-access__overview {
    display: flex;
    gap: 40px;
    margin-top: 48px;
    flex-direction: column;
  }

  .top-access__clinic {
    width: 100%;
  }

  .top-access__clinic-name {
    font-size: 22px;
  }

  .top-access__clinic-kana {
    font-size: 16px;
  }

  .top-access__clinic-info {
    margin-top: 24px;
  }

  .top-access__clinic-info p {
    font-size: 16px;
    line-height: 1.8;
  }

  .top-access__clinic-info p + p {
    margin-top: 20px;
  }

  .top-access__clinic-photo {
    width: 200px;
    margin-top: 20px;
  }

  .top-access__map {
    width: 100%;
  }

  .top-access__map iframe {
    height: 300px;
  }


  /* Methods */

  .top-access__methods {
    display: flex;
    gap: 64px;
    margin-top: 72px;
    flex-direction: column;
  }

  .top-access__method-title {
    padding-bottom: 16px;
    font-size: 26px;
  }

  .top-access__method-title::after {
    width: 180px;
  }

  .top-access__method-body {
    margin-top: 28px;
  }

  .top-access__method-body p,
  .top-access__method-body li {
    font-size: 16px;
    line-height: 1.8;
  }

  .top-access__parking {
    margin-top: 48px;
  }

  .top-access__sub-title {
    margin-bottom: 16px;
    font-size: 20px;
  }


  /* Bus */

  .top-access__bus-stop,
  .top-access__bus-route {
    margin-top: 24px;
  }

  .top-access__bus-route ul {
    padding-left: 1.3em;
  }

  .top-access__bus-bottom {
    gap: 24px;
    align-items: center;
    margin-top: 32px;
  }

  .top-access__timetable {
    flex-basis: 116px;
    width: 116px;
    height: 116px;
    font-size: 16px;
    border-radius: 20px;
  }

  .top-access__bus-photo {
    width: 140px;
  }

}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-access__panel {
    padding-right: 16px;
    padding-left: 16px;
  }

  .top-access__clinic-photo {
    width: 180px;
  }

  .top-access__bus-bottom {
    gap: 16px;
  }

  .top-access__timetable {
    flex-basis: 108px;
    width: 108px;
    height: 108px;
    font-size: 15px;
  }

  .top-access__bus-photo {
    width: 128px;
  }

}

/* ==================================================
   16: 

地域とともに歩む 新川中央眼科
================================================== */

.top-community {
  padding: 120px 0;
}


/* ==================================================
   Heading
================================================== */

.top-community__heading {
  text-align: center;
}

.top-community__title {
  position: relative;
  margin: 0;
  padding-bottom: 34px;
  color: #0C3D7D;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .04em;
}

.top-community__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 290px;
  height: 2px;
  background-color: #C6A86A;
  transform: translateX(-50%);
}


/* ==================================================
   Lead
================================================== */

.top-community__lead {
  max-width: 1080px;
  margin: 58px auto 0;
  color: #1F3656;
  font-size: 18px;
  line-height: 1.8;
}


/* ==================================================
   Gallery
================================================== */

.top-community__gallery {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
  margin-top: 88px;
}

.top-community__image {
  display: flex;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.top-community__image--01 {
  width: 360px;
}

.top-community__image--02 {
  width: 400px;
}

.top-community__image--03 {
  width: 520px;
}

.top-community__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ==================================================
   Middle
================================================== */

@media screen and (min-width: 1025px) and (max-width: 1294px) {

  .top-community__gallery {
    gap: 40px;
  }

  .top-community__image {
    height: 320px;
  }

  .top-community__image--01 {
    width: 280px;
  }

  .top-community__image--02 {
    width: 320px;
  }

  .top-community__image--03 {
    width: 400px;
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .top-community {
    padding: 80px 0;
  }

  .top-community__title {
    padding-bottom: 28px;
    font-size: 34px;
  }

  .top-community__title::after {
    width: 240px;
  }

  .top-community__lead {
    max-width: 680px;
    margin-top: 48px;
    font-size: 17px;
  }

  .top-community__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 64px;
  }

  .top-community__image {
    width: 100%;
    height: 300px;
  }

  .top-community__image--03 {
    grid-column: 1 / -1;
    width: 520px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

}


/* ==================================================
   Smartphone
================================================== */

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

  .top-community {
    padding: 80px 0;
  }

  .top-community__title {
    padding-bottom: 24px;
    font-size: 28px;
    line-height: 1.65;
  }

  .top-community__title::after {
    width: 200px;
  }

  .top-community__lead {
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.8;
  }

  .top-community__gallery {
    display: flex;
    gap: 40px;
    margin-top: 56px;
    flex-direction: column;
  }

  .top-community__image {
    width: 100%;
    height: 280px;
  }

  .top-community__image--01 {
    width: 82%;
    margin-right: auto;
    margin-left: auto;
  }

  .top-community__image--02 {
    width: 88%;
    margin-right: auto;
    margin-left: auto;
  }

  .top-community__image--03 {
    width: 100%;
  }

}


/* ==================================================
   Small Smartphone
================================================== */

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

  .top-community__image {
    height: 250px;
  }

}