@charset "UTF-8";
/*

　トップページ
----------------------------------------------- */
.h2 {
  display: grid;
  align-content: center;
  font-weight: 400;
  gap: 0.4em;
}
.h2.center {
  text-align: center;
}
.h2 .en {
  color: var(--color-olive);
  font-size: 12px;
}
@media (width >= 960px) {
  .h2 .en {
    font-size: 12rem;
  }
}
.h2 .ja {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.1em;
}
@media (width >= 960px) {
  .h2 .ja {
    font-size: 18rem;
  }
}

[class^=ill-] {
  position: absolute;
}

/* ヒーロー */
.hero {
  position: relative;
}
.hero .slider::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  background: linear-gradient(white, rgba(255, 255, 255, 0));
}
@media (width >= 960px) {
  .hero .slider::before {
    height: 220px;
  }
}
.hero .slider::after {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: linear-gradient(rgba(247, 247, 243, 0), #f7f7f3);
}
@media (width >= 960px) {
  .hero .slider::after {
    height: 220px;
  }
}
@media (width < 960px) {
  .hero .slider::after {
    height: 130px;
  }
}
.hero .text {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: row-reverse;
}
@media (width >= 960px) {
  .hero .text {
    top: 10vw;
    right: 50%;
    transform: translateX(1.5625vw);
    gap: 6.25vw;
  }
}
@media (width < 960px) {
  .hero .text {
    top: 17.1794871795vw;
    left: 2.5641025641vw;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
  }
}
@media (width >= 960px) {
  .hero .text-first img {
    width: 5.0625vw;
  }
}
@media (width < 960px) {
  .hero .text-first {
    flex: 1 0 50%;
  }
  .hero .text-first img {
    width: 14.358974359vw;
  }
}
@media (width >= 960px) {
  .hero .text-second {
    margin-top: 3.125vw;
  }
  .hero .text-second img {
    width: 9.125vw;
  }
}
@media (width < 960px) {
  .hero .text-second {
    flex: 1 0 50%;
    margin-top: 9.7435897436vw;
    padding-right: 10.2564102564vw;
    text-align: right;
  }
  .hero .text-second img {
    width: 22.0512820513vw;
  }
}
.hero .blinks [class^=ill-] {
  z-index: 4;
}
.hero .blinks .ill-1 {
  width: 11.2820512821vw;
  top: 75.8974358974vw;
  left: 6.9230769231vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-1 {
    width: 5.125vw;
    top: 12.9375vw;
    left: 14.6875vw;
  }
}
.hero .blinks .ill-2 {
  width: 5.1282051282vw;
  top: 73.0769230769vw;
  left: 8.7179487179vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-2 {
    width: 2.3125vw;
    top: 11.625vw;
    left: 15.4375vw;
  }
}
.hero .blinks .ill-3 {
  width: 13.8461538462vw;
  top: 92.3076923077vw;
  left: 6.1538461538vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-3 {
    width: 6.25vw;
    top: 25.5vw;
    left: 13.5625vw;
  }
}
.hero .blinks .ill-4 {
  width: 10.2564102564vw;
  top: 95.641025641vw;
  left: 14.6153846154vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-4 {
    width: 4.6875vw;
    top: 27vw;
    left: 17.25vw;
  }
}
.hero .blinks .ill-5 {
  width: 4.6153846154vw;
  top: 83.8461538462vw;
  left: 23.0769230769vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-5 {
    width: 1.6875vw;
    top: 8.125vw;
    left: 24.9375vw;
  }
}
.hero .blinks .ill-6 {
  width: 16.1538461538vw;
  top: 92.8205128205vw;
  right: 8.9743589744vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-6 {
    width: 7.1875vw;
    top: 34.625vw;
    left: 25.5vw;
  }
}
.hero .blinks .ill-7 {
  width: 16.4102564103vw;
  top: 27.4358974359vw;
  left: 23.0769230769vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-7 {
    width: 5.3125vw;
    top: 13.5vw;
    left: 35.125vw;
  }
}
.hero .blinks .ill-8 {
  width: 24.358974359vw;
  top: 9.2307692308vw;
  right: 17.6923076923vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-8 {
    width: 8vw;
    top: 7.5625vw;
    right: 42.6875vw;
  }
}
.hero .blinks .ill-9 {
  width: 18.9743589744vw;
  top: 21.2820512821vw;
  right: 34.358974359vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-9 {
    width: 6.1875vw;
    top: 11.5vw;
    right: 48.125vw;
  }
}
.hero .blinks .ill-10 {
  width: 16.1538461538vw;
  top: 64.358974359vw;
  right: 1.5384615385vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-10 {
    width: 6.5625vw;
    top: 32.0625vw;
    right: 26.9375vw;
  }
}
.hero .blinks .ill-11 {
  width: 9.7435897436vw;
  top: 73.8461538462vw;
  right: -2.5641025641vw;
}
@media (width >= 960px) {
  .hero .blinks .ill-11 {
    width: 4vw;
    top: 35.8125vw;
    right: 25.375vw;
  }
}
.hero .blinks .blink-a {
  animation: blinkFadeA 3s infinite;
}
.hero .blinks .blink-b {
  animation: blinkFadeB 5s infinite;
}
.hero .blinks .blink-c {
  animation: blinkFadeC 7s infinite;
}
@keyframes blinkFadeA {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blinkFadeB {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blinkFadeC {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* お知らせ */
.news {
  position: relative;
  z-index: 5;
}
@media (width >= 960px) {
  .news {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-inline: calc(50% - 550px);
  }
}
@media (width >= 960px) and (width < 1180px) {
  .news {
    padding-inline: 40px;
  }
}
@media (width >= 960px) and (max-width: 960px) {
  .news {
    padding-inline: 20px;
  }
}
@media (width < 960px) {
  .news {
    padding-inline: 10px;
  }
}
.news-content {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  display: grid;
}
@media (width >= 960px) {
  .news-content {
    padding: 45px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "title post" "button post";
    gap: 0 100px;
  }
}
@media (width < 960px) {
  .news-content {
    margin-top: -150px;
    padding: 30px 30px 35px;
    justify-items: start;
  }
}
.news h2 {
  margin-bottom: 20px;
}
@media (width >= 960px) {
  .news h2 {
    margin-bottom: auto;
    grid-area: title;
  }
}
.news-list {
  display: grid;
  align-content: center;
}
@media (width >= 960px) {
  .news-list {
    min-height: 120px;
    grid-area: post;
    gap: 0.6em;
  }
}
@media (width < 960px) {
  .news-list {
    gap: 15px;
  }
}
.news-list a {
  display: grid;
  line-height: 1.43;
  text-decoration: none;
}
@media (width >= 960px) {
  .news-list a {
    grid-template-columns: 8em 1fr;
    gap: 20px;
  }
}
@media (width < 960px) {
  .news-list a {
    gap: 5px;
    font-size: 15px;
  }
}
.news-list a:hover .title {
  text-decoration: underline;
}
.news .button {
  margin-top: 27px;
}
@media (width >= 960px) {
  .news .button {
    margin-top: auto;
    grid-area: button;
  }
}

/* ごあいさつ */
.greeting {
  padding-inline: calc(50% - 490px);
}
@media (width < 1060px) {
  .greeting {
    padding-inline: 40px;
  }
}
@media (max-width: 960px) {
  .greeting {
    padding-inline: 20px;
  }
}
.greeting {
  position: relative;
  margin-top: 30px;
  padding-top: 120px;
}
@media (width >= 960px) {
  .greeting {
    margin-top: 150px;
    padding-top: 320px;
  }
}
.greeting h2 {
  background: url(../../img/bg-greeting-title.svg) no-repeat center/100%;
  aspect-ratio: 307/259;
}
@media (width >= 960px) {
  .greeting h2 {
    position: absolute;
    top: 0;
    right: calc(50% - 45px);
    width: 311px;
  }
}
@media (width < 960px) {
  .greeting h2 {
    width: 196px;
    margin-inline: auto;
    margin-bottom: 35px;
  }
}
@media (width >= 960px) {
  .greeting-content {
    display: grid;
    align-items: start;
    grid-template-columns: 52% 1fr;
    gap: 60px;
  }
}
@media (width < 960px) {
  .greeting-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
}
.greeting .lead {
  margin-bottom: 0.8em;
  font-weight: 500;
  font-size: 22rem;
  letter-spacing: 0.1em;
}
@media (width >= 960px) {
  .greeting .lead {
    margin-bottom: 1em;
    font-size: 24rem;
  }
}
@media (width >= 960px) {
  .greeting .button-wrap {
    margin-top: 40px;
  }
}
@media (width < 960px) {
  .greeting .button-wrap {
    margin-top: 25px;
    text-align: center;
  }
}
.greeting .image {
  position: relative;
}
@media (width >= 960px) {
  .greeting .image {
    margin-top: -150px;
  }
}
@media (width < 960px) {
  .greeting .image {
    width: fit-content;
  }
}
.greeting .image .pic {
  position: relative;
}
@media (width < 960px) {
  .greeting .image .pic {
    width: 245px;
  }
}
.greeting .image .pic img {
  border-radius: 9999px;
}
.greeting .image .pic::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  translate: 8px -8px;
  content: "";
  background: #f6eaff;
  border-radius: 9999px;
}
@media (width >= 960px) {
  .greeting .image .pic::before {
    translate: 10px -10px;
  }
}
.greeting .image .name {
  position: absolute;
  z-index: 2;
}
@media (width >= 960px) {
  .greeting .image .name {
    bottom: -25px;
    right: -40px;
    width: 194px;
  }
}
@media (width < 960px) {
  .greeting .image .name {
    bottom: 10px;
    right: -90px;
    width: 155px;
  }
}
.greeting .ill-1 {
  width: 249px;
  top: 0;
  right: calc(50% + 15px);
}
@media (width >= 960px) {
  .greeting .ill-1 {
    width: 609px;
    top: -125px;
    right: calc(50% + 310px);
  }
}
@media (width >= 960px) {
  .greeting .ill-2 {
    width: 204px;
    top: 65px;
    left: calc(50% + 490px);
  }
}
@media (width < 960px) {
  .greeting .ill-2 {
    display: none;
  }
}

/* 特長 */
.features {
  padding-inline: calc(50% - 550px);
}
@media (width < 1180px) {
  .features {
    padding-inline: 40px;
  }
}
@media (max-width: 960px) {
  .features {
    padding-inline: 20px;
  }
}
.features {
  position: relative;
  padding-block: 155px 10px;
}
@media (width >= 960px) {
  .features {
    padding-block: 200px 0;
  }
}
.features h2 {
  background: url(../../img/bg-features-title.svg) no-repeat center/contain;
  aspect-ratio: 365/269;
}
@media (width >= 960px) {
  .features h2 {
    position: absolute;
    width: min(365px, 30.9322033898vw);
    margin-top: -50px;
    margin-left: -30px;
  }
}
@media (width < 960px) {
  .features h2 {
    width: 233px;
    margin-inline: auto;
    margin-bottom: 35px;
  }
}
.features-content {
  display: grid;
  gap: 65px;
}
@media (width >= 960px) {
  .features-content {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 55px 40px;
  }
  .features-content:has(.card:nth-child(3n+1):last-child) + .img-btm {
    margin-top: -180px;
  }
  .features-content:has(.card:nth-child(3n):last-child) + .img-btm {
    margin-top: -240px;
  }
}
@media (width >= 960px) {
  .features-content .card:first-child {
    grid-column: 2;
  }
  .features-content .card:nth-child(3n+1) {
    transform: translateY(50px);
  }
  .features-content .card:nth-child(3n+2) {
    transform: translateY(100px);
  }
}
.features-content figure {
  overflow: hidden;
  aspect-ratio: 34/22;
}
.features-content figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: inherit;
  max-height: inherit;
  mask-image: url(../../img/mask-features.svg);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.features-content h3 {
  margin-block: 1.3em 0.9em;
  color: #777;
  font-size: 18rem;
  font-weight: 500;
}
@media (width >= 960px) {
  .features-content h3 {
    font-size: 20rem;
  }
}
.features-content p {
  margin-bottom: 2em;
  color: #777;
  font-size: 14rem;
  line-height: 1.57;
}
.features-content .button-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.features-content .button {
  min-width: inherit;
}
@media (width < 960px) {
  .features-content .button {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}
@media (width >= 960px) {
  .features .img-btm {
    margin-right: -180px;
    text-align: right;
  }
  .features .img-btm img {
    width: 490px;
  }
}
@media (width < 960px) {
  .features .img-btm {
    margin-top: 10px;
  }
  .features .img-btm img {
    position: relative;
    left: calc(50% + 45px);
    width: 263px;
  }
}
.features .ill-3 {
  width: 308px;
  top: -10px;
  left: calc(50% + 20px);
}
@media (width >= 960px) {
  .features .ill-3 {
    width: 753px;
    top: -20px;
    left: calc(50% + 100px);
  }
}
@media (width >= 960px) {
  .features .ill-4 {
    width: 49px;
    top: 505px;
    left: calc(50% + 530px);
  }
}
@media (width < 960px) {
  .features .ill-4 {
    display: none;
  }
}
@media (width >= 960px) {
  .features .ill-5 {
    z-index: -1;
    width: 541px;
    top: 984px;
    left: calc(50% + 390px);
  }
}
@media (width < 960px) {
  .features .ill-5 {
    display: none;
  }
}
@media (width >= 960px) {
  .features .ill-6 {
    width: 594px;
    bottom: -90px;
    right: calc(50% + 300px);
  }
}
@media (width < 960px) {
  .features .ill-6 {
    width: 304px;
    bottom: 0px;
    right: calc(50% - 50px);
  }
}

/* 診療案内 */
.information {
  padding-inline: calc(50% - 490px);
}
@media (width < 1060px) {
  .information {
    padding-inline: 40px;
  }
}
@media (max-width: 960px) {
  .information {
    padding-inline: 20px;
  }
}
.information {
  position: relative;
  padding-top: 100px;
}
@media (width >= 960px) {
  .information {
    padding-top: 20px;
  }
}
.information h2 {
  background: url(../../img/bg-info-title.svg) no-repeat center/contain;
  aspect-ratio: 268/261;
  width: 171px;
  margin-inline: auto;
}
@media (width >= 960px) {
  .information h2 {
    width: 268px;
  }
}
.information > section {
  display: flex;
}
@media (width < 960px) {
  .information > section {
    flex-direction: column;
  }
}
.information > section hgroup {
  position: relative;
}
.information > section hgroup h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #777;
  font-size: 15rem;
}
@media (width >= 960px) {
  .information > section hgroup h3 {
    font-size: 16rem;
  }
}
.information > section hgroup img {
  position: absolute;
  z-index: -1;
}
.information > section ul {
  column-count: 2;
}
@media (width < 960px) {
  .information > section ul {
    width: fit-content;
    margin-inline: auto;
  }
}
.information > section ul li {
  display: flex;
  gap: 0.2em;
  padding-top: 1em;
  font-size: 15rem;
  line-height: 1.43;
}
.information > section ul li::before {
  content: "・";
}
@media (width >= 960px) {
  .information > section .button {
    margin-top: 40px;
  }
}
@media (width < 960px) {
  .information > section .button {
    margin-top: 25px;
    display: flex;
    width: 180px;
    margin-inline: auto;
  }
}
.information-ob {
  border-bottom: 3px dotted #ddddcd;
  padding-bottom: 40px;
}
@media (width >= 960px) {
  .information-ob {
    gap: 60px;
    padding-bottom: 50px;
  }
}
.information-ob hgroup {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (width >= 960px) {
  .information-ob hgroup {
    width: 340px;
    height: 275px;
    margin-left: -50px;
  }
}
@media (width < 960px) {
  .information-ob hgroup {
    width: 320px;
    max-width: 100%;
    margin-top: 140px;
    margin-inline: auto;
  }
}
.information-ob hgroup h3 {
  background-image: url(../../img/bg-ob-title.svg);
  aspect-ratio: 150/135;
}
@media (width >= 960px) {
  .information-ob hgroup h3 {
    width: 150px;
  }
}
@media (width < 960px) {
  .information-ob hgroup h3 {
    width: 120px;
  }
}
@media (width >= 960px) {
  .information-ob hgroup img {
    top: -5px;
    left: -10px;
    width: 308px;
  }
}
@media (width < 960px) {
  .information-ob hgroup img {
    width: 245px;
    right: 75px;
    bottom: -10px;
  }
}
.information-ob .content {
  margin-top: 30px;
}
@media (width >= 960px) {
  .information-ob .content {
    margin-top: 70px;
  }
}
.information-gyn {
  padding-top: 45px;
  gap: 15px;
}
@media (width >= 960px) {
  .information-gyn {
    flex-direction: row-reverse;
    gap: 40px;
    padding-top: 60px;
  }
}
.information-gyn hgroup {
  display: flex;
  align-items: flex-start;
  margin-left: auto;
}
@media (width >= 960px) {
  .information-gyn hgroup {
    width: 340px;
    height: 290px;
  }
}
@media (width < 960px) {
  .information-gyn hgroup {
    width: 330px;
    margin-inline: auto;
    padding-block: 45px 55px;
  }
}
.information-gyn hgroup h3 {
  background-image: url(../../img/bg-gyn-title.svg);
  aspect-ratio: 142/140;
}
@media (width >= 960px) {
  .information-gyn hgroup h3 {
    width: 140px;
  }
}
@media (width < 960px) {
  .information-gyn hgroup h3 {
    width: 115px;
  }
}
@media (width >= 960px) {
  .information-gyn hgroup img {
    top: 25px;
    left: 30px;
    width: 308px;
  }
}
@media (width < 960px) {
  .information-gyn hgroup img {
    width: 245px;
    right: 0;
    top: 0;
  }
}
@media (width >= 960px) {
  .information-gyn ul {
    column-gap: 20px;
  }
}
@media (width >= 960px) {
  .information .ill-7 {
    width: 171px;
    top: 150px;
    left: calc(50% + 60px);
  }
}
@media (width < 960px) {
  .information .ill-7 {
    width: 109px;
    top: 150px;
    left: calc(50% + 45px);
  }
}
@media (width >= 960px) {
  .information .ill-8 {
    width: 102px;
    top: 500px;
    left: calc(50% + 560px);
  }
}
@media (width < 960px) {
  .information .ill-8 {
    display: none;
  }
}
@media (width >= 960px) {
  .information .ill-9 {
    width: 131px;
    bottom: 30px;
    right: calc(50% + 550px);
  }
}
@media (width < 960px) {
  .information .ill-9 {
    width: 67px;
    bottom: -40px;
    right: calc(50% + 108px);
  }
}
@media (width >= 960px) {
  .information .ill-10 {
    width: 58px;
    bottom: -10px;
    left: calc(50% + 550px);
  }
}
@media (width < 960px) {
  .information .ill-10 {
    display: none;
  }
}

/* 公式インスタグラム */
.instagram {
  padding-inline: calc(50% - 550px);
}
@media (width < 1180px) {
  .instagram {
    padding-inline: 40px;
  }
}
@media (max-width: 960px) {
  .instagram {
    padding-inline: 20px;
  }
}
.instagram {
  position: relative;
  padding-top: 105px;
  padding-bottom: 50px;
}
@media (width >= 960px) {
  .instagram {
    padding-top: 100px;
    display: grid;
    grid-template-columns: 349px 1fr;
    gap: 85px;
  }
}
.instagram h2 {
  position: relative;
  z-index: 2;
  background: url(../../img/bg-insta-title.svg) no-repeat center/contain;
  aspect-ratio: 349/270;
}
@media (width >= 960px) {
  .instagram h2 {
    width: 349px;
    margin-left: -5px;
    padding-bottom: 25px;
  }
}
@media (width < 960px) {
  .instagram h2 {
    width: 279px;
    margin-inline: auto;
    margin-bottom: 35px;
  }
}
.instagram .slick-list {
  padding-bottom: 10px;
}
@media (width >= 960px) {
  .instagram .slick-list {
    padding-left: 10px;
  }
}
@media (width < 960px) {
  .instagram .slick-list {
    padding-left: 20px;
    margin-inline: -20px;
  }
}
.instagram .slick-track {
  display: flex;
  gap: 20px;
}
.instagram .slick-slide {
  float: none;
  border: 10px solid #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03);
}
.instagram .slick-arrow {
  position: absolute;
  z-index: 2;
  bottom: -20px;
}
.instagram .slick-arrow.slick-prev {
  left: 0;
}
.instagram .slick-arrow.slick-next {
  left: 100px;
}
.instagram .slick-dots {
  position: absolute;
  bottom: -50px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.instagram .slick-dots li {
  line-height: 0;
}
.instagram .slick-dots button {
  width: 10px;
  aspect-ratio: 1;
  background-color: #ccc;
  border-radius: 50%;
  line-height: 0;
  text-indent: -9999px;
}
.instagram .slick-dots .slick-active button {
  background-color: #777;
}

#sb_instagram {
  padding-bottom: 0 !important;
}
#sb_instagram #sbi_images {
  display: block;
  padding: 0;
}
#sb_instagram #sbi_images .sbi_item {
  width: auto;
}
#sb_instagram #sbi_images .sbi_item.sbi_transition {
  opacity: 1;
}
#sb_instagram .sbi_photo {
  aspect-ratio: 218/328;
  height: auto !important;
}
#sb_instagram .sbi_photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: inherit;
  max-height: inherit;
  width: 200px;
}

#sbi_load {
  display: none;
}