#mainsec {
  background-image: url(/assets/img/main_img.webp);
  width: 100%;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 820px) {
  #mainsec {
    background-position: right;
  }
}
#mainsec h1 {
  font-size: clamp(3.6rem, 4vw, 4.6rem);
  color: #fff;
  writing-mode: tb;
  font-family: Noto serif JP;
}

.content p {
  font-size: 1.6rem;
}

.greetings {
  margin-top: 5vh;
}
.greetings .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3em;
  background-color: #FFF;
  padding: 5em;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1199px) {
  .greetings .flex {
    flex-direction: column-reverse;
    padding: 5vw;
  }
}
.greetings div {
  flex: 1;
}
.greetings p {
  font-size: clamp(1.4rem, 1vw, 1.8rem);
}
.greetings span {
  font-weight: bold;
  color: #48241E;
}
.greetings img {
  flex-basis: calc(50% - 3em);
  width: 100%;
  height: auto;
}
@media (min-width: 1200px) {
  .greetings img {
    min-width: 450px;
  }
}
.greetings h3 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-family: Noto serif JP;
  padding-bottom: 1em;
  word-break: keep-all;
}
@media (max-width: 820px) {
  .greetings h3 {
    word-break: break-word;
  }
}
.greetings .name {
  font-size: clamp(2.4rem, 1vw, 3rem);
  font-family: Noto serif JP;
  font-weight: bold;
  padding-top: 1em;
  color: #48241E;
}

.feature {
  margin-top: 5vh;
}
.feature section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #48241E;
}
@media (max-width: 1199px) {
  .feature section:nth-child(even) {
    flex-direction: column-reverse;
  }
}
@media (max-width: 1199px) {
  .feature section {
    flex-direction: column;
    align-items: flex-start;
  }
}
.feature section div {
  display: inline-block;
  padding: 0 max(2em, 2.5vw);
  flex-basis: 45%;
}
@media (max-width: 1199px) {
  .feature section div {
    padding: 2em max(2em, 2.5vw);
  }
}
.feature section div h3 {
  font-size: clamp(3rem, 3vw, 4.2rem);
  font-family: "02Ryusenkei-BK";
  word-break: keep-all;
}
@media (max-width: 820px) {
  .feature section div h3 {
    word-break: break-all;
  }
}
.feature section div h4 {
  font-size: clamp(2.4rem, 1vw, 3.2rem);
  font-family: "Arsenal", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.feature section div p {
  font-size: clamp(1.4rem, 1vw, 1.8rem);
  padding-top: 1em;
}
.feature section span {
  width: 1px;
  background-color: #917c78;
}
.feature section img {
  flex-basis: 45%;
  width: 100%;
  height: auto;
}
@media (max-width: 1199px) {
  .feature section img {
    flex-basis: 100%;
  }
}

.generation {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-color: #FFF;
  margin-top: 5vh;
  padding: 5vh max(2em, 2.5vw) 0;
}
@media (max-width: 1023px) {
  .generation {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px calc(51% - 18px) repeat-x;
  }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .generation {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}
@media (max-width: 480px) {
  .generation {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}
.generation .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5vh 0;
}
@media (max-width: 1199px) {
  .generation .flex {
    gap: 5vw;
  }
}
.generation .flex .box {
  flex-basis: calc(25% - 5vw);
  text-align: center;
}
@media (max-width: 1199px) {
  .generation .flex .box {
    flex-basis: calc(50% - 5vw);
  }
}
.generation .flex .box img {
  width: auto;
  height: 200px;
  margin: 0 auto;
}
.generation .flex .box h3 {
  font-family: "Kaisei Opti", serif;
  font-size: clamp(1.8rem, 1vw, 2.6rem);
  color: #48241E;
  border-style: solid;
  display: inline-block;
}
.generation .flex .box:first-child h3 {
  --custom-text-color1: #ffcccc;
  -o-border-image: repeating-linear-gradient(-50deg, var(--custom-text-color1), var(--custom-text-color1) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
  border-image: repeating-linear-gradient(-50deg, var(--custom-text-color1), var(--custom-text-color1) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
}
.generation .flex .box:nth-child(2) h3 {
  --custom-text-color2: #c4b2dd;
  -o-border-image: repeating-linear-gradient(-50deg, var(--custom-text-color2), var(--custom-text-color2) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
  border-image: repeating-linear-gradient(-50deg, var(--custom-text-color2), var(--custom-text-color2) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
}
.generation .flex .box:nth-child(3) h3 {
  --custom-text-color3: #add8e6;
  -o-border-image: repeating-linear-gradient(-50deg, var(--custom-text-color3), var(--custom-text-color3) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
  border-image: repeating-linear-gradient(-50deg, var(--custom-text-color3), var(--custom-text-color3) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
}
.generation .flex .box:last-child h3 {
  --custom-text-color4: #bcdab9;
  -o-border-image: repeating-linear-gradient(-50deg, var(--custom-text-color4), var(--custom-text-color4) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
  border-image: repeating-linear-gradient(-50deg, var(--custom-text-color4), var(--custom-text-color4) 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
}
.generation .flex .box div {
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
}
.generation .flex .box div ul {
  flex: 1;
  font-size: clamp(1.4rem, 1vw, 1.6rem);
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
}
.generation .flex .box div ul li {
  color: #48241E;
  background-color: #FFF;
  border: 1px solid #48241E;
  border-radius: 25px;
  z-index: 2;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.generation .flex .box div ul li span {
  position: relative;
  z-index: 1;
}
.generation .flex .box div ul li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background-color: #48241E;
  transition: transform 0.2s ease-in-out;
}
.generation .flex .box div ul li:hover {
  position: relative;
  z-index: 3;
}
.generation .flex .box div ul li:hover::before {
  transform: translateX(0);
}
.generation .flex .box div ul li a {
  font-size: 1.6rem;
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0.5em;
}
.generation .flex .box:first-child div ul li::before {
  background-color: #ffcccc;
}
.generation .flex .box:nth-child(2) div ul li::before {
  background-color: #c4b2dd;
}
.generation .flex .box:nth-child(3) div ul li::before {
  background-color: #add8e6;
}
.generation .flex .box:last-child div ul li::before {
  background-color: #bcdab9;
}

.subjecttitle h2 {
  font-size: clamp(3rem, 3vw, 4.2rem);
  color: #48241E;
  font-family: Noto serif JP;
}
.subjecttitle p {
  font-size: clamp(1.4rem, 1vw, 1.8rem);
  padding-top: 1em;
}

.gynecology {
  display: flex;
  flex-wrap: wrap;
}
.gynecology div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-basis: 33.3333333333%;
  padding: 1em;
  gap: 1em;
}
@media (max-width: 820px) {
  .gynecology div {
    flex-basis: 50%;
    align-items: center;
  }
  .gynecology div:nth-child(odd) {
    padding-left: 0;
  }
  .gynecology div:nth-child(even) {
    padding-right: 0;
  }
  .gynecology div:nth-child(n+3) {
    padding-top: 3em;
  }
}
.gynecology div div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
@media (max-width: 820px) {
  .gynecology div div {
    flex-direction: column;
    padding: 0;
  }
}
.gynecology div div img {
  width: 100px;
}
.gynecology div div h3 {
  font-size: clamp(1.6rem, 1vw, 2rem);
}
.gynecology div button {
  background-color: #009ca6;
  width: 100%;
  font-size: 1.6rem;
  padding: 1em;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-sizing: border-box;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: 0.5s, color 0.1s;
  -webkit-transition: 0.5s, color 0.1s;
  -moz-transition: 0.5s, color 0.1s;
}
.gynecology div button:hover {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  -moz-transform: translate(0px, 5px);
}

.psychiatry {
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 1199px) {
  .psychiatry {
    justify-content: space-evenly;
  }
}
.psychiatry div {
  flex-basis: calc(16.6666666667% - 1rem);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
@media (max-width: 1199px) {
  .psychiatry div {
    flex-basis: calc(33.3333333333% - 1rem);
  }
}
.psychiatry div a {
  display: inline-block;
  padding: 1em;
  width: 100%;
  height: 100%;
}
.psychiatry div a:hover h3::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.psychiatry div a:hover img {
  scale: 1.2;
}
.psychiatry div h3 {
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  display: inline-block;
  position: relative;
}
.psychiatry div h3::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #48241E;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.psychiatry div img {
  max-height: 125px;
  border-radius: 20px;
  padding: 1em;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  margin: 0 auto;
}

.mcphoto {
  overflow: hidden;
  margin-top: 5vh;
}
.mcphoto a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  transition: 0.3s;
}
.mcphoto a:hover {
  opacity: 0.9;
  transform: scale(1.03);
}
.mcphoto a img {
  height: 25vh;
  width: 100%;
  object-fit: cover;
}
.mcphoto a p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Kaisei Opti", serif;
  font-size: clamp(2rem, 2vw, 3rem);
  font-weight: 700;
  text-shadow: 1px 1px 3px #917c78;
  display: inline-block;
  text-align: center;
  color: #FFF;
  width: max-content;
}

.disease {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.disease div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 14.2857142857%;
  gap: 1em;
}
@media (max-width: 820px) {
  .disease div {
    flex-basis: 50%;
  }
}
.disease div img {
  height: 15vh;
}
.disease div h3 {
  font-size: clamp(1.6rem, 1vw, 2rem);
}
.disease p {
  line-height: 2.5rem;
}

.scroll-content {
  display: flex;
  justify-content: space-evenly;
}
@media (max-width: 1199px) {
  .scroll-content {
    flex-direction: column;
    gap: 1em;
  }
}
.scroll-content div {
  flex-basis: 14.2857142857%;
  background: white;
  padding: 1em;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
@media (max-width: 1199px) {
  .scroll-content div {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
}
.scroll-content div:hover h3::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.scroll-content img {
  height: 200px;
}
.scroll-content ul {
  font-size: clamp(1.4rem, 1vw, 1.6rem);
}
.scroll-content h3 {
  line-height: 1.5;
  display: inline-block;
  position: relative;
}
.scroll-content h3::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #48241E;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}