@charset "utf-8";
@import url("variable.css");

/* =========================
  Header
========================= */
header {
  display: flex;
  justify-content: space-between;
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-block: var(--size-23);
  padding-inline: var(--size-70);
}

.header-logo {
  inline-size: min(14.615vw, 190px);
}

.header-sns {
  display: flex;
  gap: var(--size-20);
  align-items: center;
}
.header-sns img {
  inline-size: var(--size-30);
}
.header-sns a:first-of-type img {
  inline-size: var(--size-25);
}

@media (max-width: 767px) {
  header {
    padding-block: var(--size-20);
    padding-inline: var(--size-25) var(--size-20);
  }
  .header-logo {
    inline-size: max(48.717vw, 190px);
  }
  .header-sns {
    gap: var(--size-15);
  }
}

/* =========================
  hero
========================= */
.hero {
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-inline: var(--size-70);
}
.hero .hero-thumb {
  position: relative;
}
.hero .hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(7.69vw, 100px);
}
.hero .description {
  display: flex;
  justify-content: space-between;
  margin-block: var(--size-80);
  padding-inline: var(--size-65) var(--size-20);
}
.hero .description h1 {
  color: var(--color-dark-blue);
  font-size: var(--size-50);
  line-height: 1.34; 
}
.hero .description p {
  font-size: var(--size-19);
  font-weight: 600;
  line-height: 2.26;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .hero {
    padding: 0;
  }
  .hero .hero-play {
    inline-size: var(--size-70);
  }
  .hero .description {
    flex-direction: column;
    gap: var(--size-40);
    margin-block-start: var(--size-60);
    padding-inline: var(--size-30);
  }
  .hero .description h1 {
    font-size: var(--size-40);
    line-height: 1.45;
  }
  .hero .description p {
    font-size: var(--size-19);
    line-height: 2.1;
    letter-spacing: 0.06em;
  }
}

/* =========================
  section-figure
========================= */
.section-figure {
  padding-block: var(--size-80) var(--size-94);
  background-color: var(--color-light-blue);
}
.section-figure h2 {
  margin-block-end: var(--size-80);
  color: var(--color-dark-blue);
  font-size: var(--size-32);
  line-height: 1.6875;
  letter-spacing: 0.08em;
}
.figure-item h3 {
  display: inline-block;
  padding: var(--size-9) var(--size-20);
  color: var(--color-dark-blue);
  font-size: var(--size-20);
  font-weight: 600;
  letter-spacing: 0.05em;
  background-color: var(--color-blue);
}
.figure-item + .figure-item {
  margin-block-start: var(--size-60);
}

.note {
  margin-block-start: var(--size-50);
  font-size: var(--size-13);
  line-height: 1.38;
}
.section-figure .note p + p {
  margin-block-start: var(--size-10);
}
.section-figure .note a {
  display: inline;
  color: var(--color-dark-blue);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .section-figure {
    padding-block: var(--size-80) var(--size-84);
  }
  .section-figure .content-inner {
    padding-inline: 0;
  }
  .section-figure h2 {
    margin-block-end: var(--size-60);
    padding-inline: var(--size-30);
    font-size: var(--size-30);
    line-height: 1.6;
    letter-spacing: 0.06em;
  }
  .figure-item {
    position: relative;
    padding-inline-start: var(--size-30);
  }
  .figure-item::before {
    position: absolute;
    content: "";
    inset-block-end: 1px;
    inset-inline-start: 30px;
    inline-size: 92%;
    block-size: 9px;
    border-radius: 100vmax;
    background-color: var(--color-white);
  }
  .figure-item h3 {
    font-size: var(--size-16);
  }
  .figure-item > .js-scroll {
    overflow-x: auto;
  }
  .figure-item > .js-scroll img {
    min-inline-size: 1000px;
    margin-block-end: var(--size-10);
  }
  .js-scroll .simplebar-content-wrapper {
    position: relative;
  }
  .js-scroll .scroll-hint-icon-wrap {
    z-index: 2;
  }
  .simplebar-scrollbar:before {
    background-color: var(--color-blue) !important;
  }
  .section-figure .note {
    padding-inline: var(--size-30);
  }
  .section-figure .note p:first-of-type {
    text-align: justify;
  }

  .custom-scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    inline-size: max(32.82vw, 128px);
    block-size: max(32.82vw, 128px);
    transition: opacity .3s;
    opacity: 0;
    background-image: url(../images/icon-scrollHint.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .scroll-hint-icon-wrap.is-active .custom-scroll-hint-icon {
    animation: scroll-hint-appear 1.2s linear forwards;
    animation-iteration-count: 2;
    opacity: 1;
  }
  @keyframes scroll-hint-appear {
    0% {
      transform: translateX(40px);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50%, 100% {
      transform: translateX(-40px);
      opacity: 0;
    }
  }
}

/* =========================
  section-medical
========================= */
.section-medical {
  padding-block: var(--size-74) var(--size-90);
}
.section-medical h2 {
  margin-block-end: var(--size-28);
  color: var(--color-dark-blue);
  font-size: var(--size-23);
  line-height: 1.478;
  letter-spacing: 0.05em;
  text-align: center;
}
.vaccination-process {
  padding-block-end: min(9.76vw, 127px);
}
.vaccination-process .process-content {
  display: flex;
  justify-content: center;
  gap: min(4.46vw, 58px);
}
.process-item {
  position: relative;
  min-inline-size: min(15.38vw, 200px);
}
.process-item .item-img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  inline-size: min(11.53vw, 150px);
  margin-inline: auto;
  border-radius: 50%;
  background-color: var(--color-blue);
}
.process-item:not(:first-of-type) .item-img::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: calc((min(4.46vw, 58px) + var(--size-32)) * -1);
  transform: translateY(-50%);
  inline-size: min(4.46vw, 58px);
  block-size: var(--size-32);
  background-image: url(../images/icon-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.process-item .item-img img {
  inline-size: var(--size-84);
}
.process-item:nth-of-type(2) .item-img img {
  inline-size: var(--size-86);
}
.process-item:nth-of-type(3) .item-img img {
  inline-size: var(--size-76);
}

.process-item .item-text {
  margin-block-start: var(--size-12);
  text-align: center;
}
.process-item .item-text h3 {
  color: var(--color-turquoise-blue);
  font-size: var(--size-22);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.05em;
}
.process-item .item-text h3 strong {
  display: block;
  color: var(--color-dark-blue);
  font-size: var(--size-20);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.process-item .item-text p {
  margin-block-start: var(--size-12);
  font-size: var(--size-14);
  line-height: 1.28;
}

.vaccination-link {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.vaccination-link a {
  position: relative;
  display: flex;
  justify-content: center;
  inline-size: min(21.53vw, 280px);
  margin-block-start: var(--size-20);
  padding-block: var(--size-8);
  color: var(--color-white);
  font-weight: 600;
  line-height: 1.375;
  border-radius: 100vmax;
  background-color: var(--color-red);
}
.vaccination-link a::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-end: var(--size-25);
  transform: translateY(-50%);
  inline-size: var(--size-10);
  block-size: var(--size-14);
  background-image: url(../images/icon-triangle.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.section-medical article {
  max-inline-size: 860px;
  margin-inline: auto;
  padding-block: var(--size-45);
  padding-inline: var(--size-50) var(--size-60);
  border-radius: var(--size-14);
  background-color: var(--color-light-blue);
}
.section-medical article h3 {
  display: flex;
  align-items: center;
  gap: var(--size-12);
  color: var(--color-dark-blue);
  font-size: var(--size-22);
  letter-spacing: 0.05em;
}
.section-medical article h3 .ttl-column {
  display: block;
  aspect-ratio: 143 / 41;
  inline-size: min(11vw, 143px);
  block-size: var(--size-41);
  background-image: url(../images/ttl-column.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.section-medical article .article-content {
  display: flex;
  gap: var(--size-32);
  margin-block-start: var(--size-20);
}
.article-content .article-img {
  min-inline-size: min(16.92vw, 220px);
}
.article-content .article-text {
  font-size: var(--size-14);
  line-height: 1.64;
  letter-spacing: 0.04em;
}
.article-content .article-text p:first-of-type {
  text-align: justify;
}
.article-content .article-text p + p {
  margin-block-start: var(--size-14);
}
.article-content .article-text .note {
  font-size: 9px;
}
.article-content .article-text p a {
  display: inline;
  color: var(--color-dark-blue);
  text-decoration: underline;
}
.article-content .article-link {
  margin-block-start: var(--size-20);
}
.article-content .article-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  inline-size: min(15.38vw, 200px);
  margin-inline: auto;
  padding-block: var(--size-9);
  color: var(--color-dark-blue);
  border: 1px solid var(--color-dark-blue);
  border-radius: 100vmax;
  background-color: var(--color-white);
}
.article-content .article-link img {
  inline-size: var(--size-16);
}

@media (max-width: 767px) {
  .section-medical {
    padding-block: var(--size-80) var(--size-70);
  }
  .section-medical .content-inner {
    padding-inline: var(--size-10);
  }
  .section-medical h2 {
    margin-block-end: var(--size-30);
    padding-inline: var(--size-20);
    font-size: var(--size-22);
    line-height: 1.72;
    letter-spacing: 0.06em;
    text-align: left;
  }
  .vaccination-process {
    margin-block-end: var(--size-80);
    padding: 0;
  }
  .vaccination-process .process-content {
    flex-direction: column;
    gap: var(--size-94);
  }
  .process-item {
    min-inline-size: auto;
  }
  .process-item .item-img {
    inline-size: max(38.46vw, 150px);
  }
  .process-item:not(:first-of-type) .item-img::before {
    inset-block-start: calc(max(14.87vw, 58px) * -1);
    inset-inline-start: 50%;
    transform: translateX(-50%) rotate(90deg);
    inline-size: max(14.87vw, 58px);
    block-size: max(8.2vw, 32px);
  }
  .process-item .item-text p {
    font-size: var(--size-15);
  }
  .vaccination-link {
    position: relative;
    inset-inline-start: 0;
    transform: none;
  }
  .vaccination-link a {
    inline-size: max(71.79vw, 280px);
    margin-block-start: var(--size-18);
    margin-inline: auto;
  }

  .section-medical article {
    padding-block: var(--size-50) var(--size-60);
    padding-inline: var(--size-20);
  }
  .section-medical article h3 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-8);
    padding-inline: var(--size-10);
  }
  .section-medical article h3 .ttl-column {
    inline-size: max(36.6vw, 143px);
    block-size: max(11.538vw, 45px);
    transform: translateX(calc(var(--size-10) * -1));
  }
  .section-medical article .article-content {
    flex-direction: column;
    gap: var(--size-40);
  }
  .article-content {
    margin-block-start: var(--size-30);
  }
  .article-content .article-img {
    min-inline-size: max(46.153vw, 180px);
    max-inline-size: max(46.153vw, 180px);
    margin-inline: auto;
  }
  .article-content .article-link {
    margin-block-start: var(--size-28);
  }
  .article-content .article-link a {
    inline-size: max(71.79vw, 280px);
    padding-block: var(--size-20);
    font-size: var(--size-16);
    font-weight: 600;
  }
  .article-content .article-link img {
    inline-size: var(--size-20);
  }
}
/* =========================
  Footer
========================= */
footer {
  padding-block: var(--size-50) var(--size-15);
  background-color: var(--color-gray);
}
footer .banner-list {
  display: flex;
  justify-content: center;
  gap: var(--size-30);
}
footer .banner-list .banner-item {
  inline-size: min(29.23vw, 380px);
}
footer .banner-list .banner-item .banner-img {
  display: grid;
  border: 1px solid var(--border-orange);
  border-radius: var(--size-10);
  overflow: hidden;
}
footer .banner-list .banner-item:nth-of-type(2) .banner-img {
  border: 1px solid var(--border-purple);
}
footer .banner-list .banner-item .banner-img img {
  transition: transform 0.3s ease-in-out;
}
footer .banner-list .banner-item:hover .banner-img img {
  transform: scale(1.05);
}
footer .banner-list .banner-item p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-block-start: var(--size-10);
  color: var(--color-black);
}
footer .banner-list .banner-item p img {
  inline-size: var(--size-15);
  block-size: var(--size-15);
}
footer .footer-logo {
  inline-size: min(15.38vw, 200px);
  margin-block: var(--size-40);
  margin-inline: auto;
}
footer .footer-copyright small {
  display: block;
  font-size: var(--size-12);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (max-width: 767px) {
  footer {
    padding-block: var(--size-50) var(--size-20);
  }
  footer .banner-list {
    flex-direction: column;
    align-items: center;
  }
  footer .banner-list .banner-item {
    inline-size: max(84.61vw, 330px);
  }
  footer .banner-list .banner-item p {
    font-size: var(--size-14);
    font-weight: 600;
  }
  footer .footer-logo {
    margin-block: var(--size-70);
    inline-size: max(51.282vw, 200px);
  }
}

/* =========================
  Video modal
========================= */
.video-modal {
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: var(--size-20);
  border: none;
  background-color: transparent;
  overflow: visible;
}
.video-modal[open] {
  display: grid;
  place-items: center;
}
.video-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.72);
}
.video-modal-inner {
  position: relative;
  inline-size: min(90vw, 960px);
  padding-block-start: var(--size-40);
}
.video-modal-close {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--size-32);
  block-size: var(--size-32);
}
.video-modal-close::before,
.video-modal-close::after {
  position: absolute;
  content: "";
  inset: 50% auto auto 50%;
  inline-size: 100%;
  block-size: 2px;
  background-color: var(--color-white);
}
.video-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.video-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.video-modal-frame {
  position: relative;
  inline-size: 100%;
  padding-block-end: 56.25%;
  overflow: hidden;
  background-color: #000;
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
html:has(.video-modal[open]) {
  overflow: hidden;
}

@media (max-width: 767px) {
  .video-modal-inner {
    inline-size: min(92vw, 560px);
    padding-block-start: var(--size-48);
  }
  .video-modal-close {
    inline-size: var(--size-28);
    block-size: var(--size-28);
  }
}