@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap';
@import 'https://fonts.googleapis.com/earlyaccess/hannari.css';
@import 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap';
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------
	共通
------------------------------ */
.inner {
  container-type: inline-size;
}

h2,
h3,
h4 {
  font-weight: 700;
  color: #2872b0;
}

h2 {
  font-size: 150%;
}

h3 {
  font-size: 120%;
}
h3.u-line {
  padding-bottom: 0.5em;
  margin-bottom: 1em;
  border-bottom: 1px solid #2872b0;
}

p {
  line-height: 1.9;
}

.sec_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #e8f0f7 0, #c9dcf2 100%);
}
@media screen and (min-width: 768px) {
  .sec_header {
    padding-top: 3cqw;
    padding-bottom: 3cqw;
    margin-top: 4cqw;
    margin-bottom: 4cqw;
  }
}
@media screen and (max-width: 767px) {
  .sec_header {
    padding-top: 6cqw;
    padding-bottom: 6cqw;
    margin-top: 8cqw;
    margin-bottom: 8cqw;
  }
}
.sec_header h2 {
  text-align: center;
}
.sec_header p {
  font-weight: 700;
}

.bgBlue h3 {
  text-align: center;
  margin-bottom: 1em;
}

p span {
  font-weight: bold;
  color: #2872b0;
}

/* ------------------------------
	予約ボタン
------------------------------ */
.reserve {
  display: flex;
}
@media screen and (min-width: 768px) {
  .reserve {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .reserve {
    justify-content: center;
    margin: 8cqw auto;
  }
}
.reserve a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1.2em;
  background-color: #2872b0;
  color: #fff;
  font-weight: bold;
  border-radius: 2cqw 0 2cqw 0;
}
@media screen and (max-width: 767px) {
  .reserve a {
    border-radius: 4cqw 0 4cqw 0;
  }
}
.reserve a {
  transition: 0.1s ease-in all;
}
.reserve a::after {
  content: "▶";
  margin-left: 1em;
}
.reserve a:hover {
  transform: scale(1.05);
}

/* ------------------------------
	導入文
------------------------------ */
@media screen and (max-width: 767px) {
  .pageTtl .txt .ttl .en {
    font-size: 3vw;
  }
}

/* ------------------------------
	予約バナー
------------------------------ */
#banner .inner {
  max-width: 1140px;
}

/* ------------------------------
	このような症状はありませんか？
------------------------------ */
#introduction .inner {
  background-color: #eaf0f8;
}
@media screen and (min-width: 768px) {
  #introduction .inner {
    border-radius: 2cqw;
  }
}
@media screen and (max-width: 767px) {
  #introduction .inner {
    border-radius: 4cqw;
  }
}
#introduction .issues {
  position: relative;
}
@media screen and (min-width: 768px) {
  #introduction .issues {
    padding: 4cqw 4cqw 5cqw;
  }
}
@media screen and (max-width: 767px) {
  #introduction .issues {
    padding: 8cqw;
  }
}
#introduction .issues h3.speech-bubble {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  color: #333;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #introduction .issues h3.speech-bubble {
    margin-bottom: 5cqw;
  }
}
#introduction .issues h3.speech-bubble::before {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  margin: auto;
  -webkit-mask-image: url("/wp-content/themes/mizushima/images/icon-trouble.svg");
          mask-image: url("/wp-content/themes/mizushima/images/icon-trouble.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #2872b0;
}
@media screen and (min-width: 768px) {
  #introduction .issues h3.speech-bubble::before {
    width: 4cqw;
  }
}
@media screen and (max-width: 767px) {
  #introduction .issues h3.speech-bubble::before {
    width: 8cqw;
  }
}
#introduction .issues h3.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 15px 15px 0;
  border-color: #fff transparent transparent;
}
#introduction .issues .columns {
  margin-top: 5cqw;
  margin-bottom: 5cqw;
}
#introduction .issues::after {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  content: "";
  display: block;
  aspect-ratio: 61/86;
  margin: auto;
  background-image: url("/wp-content/themes/mizushima/images/next-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  #introduction .issues::after {
    width: 6cqw;
  }
}
@media screen and (max-width: 767px) {
  #introduction .issues::after {
    width: 12cqw;
  }
}
#introduction .suggest h3 {
  background: linear-gradient(to bottom, #c9dcf2 0%, #eaf0f8 100%);
  text-align: center;
}
@media screen and (min-width: 768px) {
  #introduction .suggest h3 {
    padding-top: 7cqw;
    font-size: 150%;
  }
}
@media screen and (max-width: 767px) {
  #introduction .suggest h3 {
    padding-top: 14cqw;
    font-size: 130%;
  }
}
@media screen and (min-width: 768px) {
  #introduction .suggest .columns {
    padding: 4cqw;
  }
}
@media screen and (max-width: 767px) {
  #introduction .suggest .columns {
    padding: 8cqw;
  }
}
#introduction .suggest .columns span {
  color: #2872b0;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #introduction .suggest .columns .-mini {
    margin-bottom: 5cqw;
  }
}

/* ------------------------------
	当院の胃カメラが選ばれる７つの理由
------------------------------ */
@media screen and (min-width: 768px) {
  #reason .columns_panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
#reason .columns_panel .title-box {
  width: 100%;
}
@media screen and (max-width: 767px) {
  #reason .columns_panel .title-box th,
  #reason .columns_panel .title-box td {
    font-size: 3vw;
  }
}
@media screen and (min-width: 768px) {
  #reason .columns_panel.-double-image {
    justify-content: space-between;
  }
  #reason .columns_panel.-double-image div {
    display: block;
    aspect-ratio: 262/143;
  }
  #reason .columns_panel.-double-image div:not(:last-of-type) {
    margin-bottom: 3cqw;
  }
}
@media screen and (max-width: 767px) {
  #reason .columns_panel.-double-image div {
    margin-bottom: 5cqw !important;
  }
}
#reason .message {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #reason .message {
    border-radius: 2cqw;
  }
}
@media screen and (max-width: 767px) {
  #reason .message {
    border-radius: 4cqw;
  }
}
@media screen and (min-width: 768px) {
  #reason .message dt,
  #reason .message dd {
    padding: 1.5cqw;
  }
}
@media screen and (max-width: 767px) {
  #reason .message dt,
  #reason .message dd {
    padding: 3cqw;
  }
}
#reason .message dt {
  background-color: #2872b0;
}
#reason .message dt h3 {
  color: #fff;
  text-align: center;
}
#reason .message dd {
  background-color: #f5f2ea;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  #reason .message dd {
    aspect-ratio: 1180/341;
    padding: 5cqw 5cqw 5cqw 30%;
    background-image: url("/wp-content/themes/mizushima/images/gastroscopy/point-message_bg.png");
    background-position: left;
  }
}
@media screen and (max-width: 767px) {
  #reason .message dd {
    aspect-ratio: 247/231;
    padding-top: 70vw;
    background-image: url("/wp-content/themes/mizushima/images/gastroscopy/point-message_bg-sp.png");
    background-position: top;
  }
}

/* ------------------------------
	胃カメラでわかる主な病気
------------------------------ */
@media screen and (max-width: 767px) {
  #targets .columns_panel {
    margin: 8cqw auto;
  }
}
#targets .columns h3 {
  border-radius: 2cqw 0 2cqw 0;
}
@media screen and (max-width: 767px) {
  #targets .columns h3 {
    border-radius: 4cqw 0 4cqw 0;
  }
}
#targets .columns h3 {
  padding: 1em;
  margin-bottom: 0.8em;
  background-color: #eaf0f8;
  text-align: center;
  color: #2872b0;
}
@media screen and (max-width: 767px) {
  #targets .columns ul {
    width: 90%;
    margin: 1em auto;
  }
}

/* ------------------------------
	流れ
------------------------------ */
#flow .step01 .tag {
  background-color: #eaf0f8;
  color: #595757;
}
#flow .step02 .tag {
  background-color: #eb6153;
}
#flow .step03 .tag {
  background-color: #eb6153;
}
#flow .step04 .tag {
  background-color: #c8b072;
}
#flow .step05 .tag {
  background-color: #c8b072;
}

/* ------------------------------
	胃カメラ検査料金
------------------------------ */
#price td {
  color: #2872b0;
}
#price td span {
  color: #595757;
}

/* ------------------------------
	CTA
------------------------------ */
#cta {
  background-color: #eaf0f8;
}
#cta .inner {
  padding: 5cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#cta .inner p {
  text-align: center;
  font-weight: bold;
}
#cta .microcopy {
  display: flex;
  color: #2872b0;
}
#cta .microcopy::before, #cta .microcopy::after {
  content: "";
  display: block;
  -webkit-mask-image: url("/wp-content/themes/mizushima/images/title-icon.svg");
          mask-image: url("/wp-content/themes/mizushima/images/title-icon.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #2872b0;
}
#cta .microcopy::before {
  margin-right: 1em;
}
#cta .microcopy::after {
  margin-left: 1em;
  transform: scaleX(-1);
}
@media screen and (min-width: 768px) {
  #cta .microcopy {
    align-items: flex-end;
    font-size: 140%;
  }
  #cta .microcopy::before, #cta .microcopy::after {
    width: 2cqw;
    height: 2cqw;
  }
}
@media screen and (max-width: 767px) {
  #cta .microcopy {
    align-items: center;
    font-size: 120%;
  }
  #cta .microcopy::before, #cta .microcopy::after {
    width: 6cqw;
    height: 6cqw;
  }
}
@media screen and (min-width: 768px) {
  #cta .fs-large {
    margin: 2cqw;
    font-size: 180%;
  }
}
@media screen and (max-width: 767px) {
  #cta .fs-large {
    margin: 4cqw;
    font-size: 140%;
  }
}/*# sourceMappingURL=gastroscopy.css.map */