@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=REM:ital,wght@0,100..900;1,100..900&display=swap");
*:not(:is(ul, ol, li)) {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  word-break: break-word;
  box-sizing: border-box;
  vertical-align: baseline;
  background: transparent;
}

html, body {
  font-size: 62.5%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

:where(:is(ul, ol):not(.is-list-normal)) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
:where(:is(ul, ol):not(.is-list-normal)) li {
  margin: 0;
  padding: 0;
}

:where(ul.is-list-normal) {
  padding-left: 1em;
  list-style: disc;
}

blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: inline-flex;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

picture {
  max-width: 100%;
}

input, select {
  vertical-align: middle;
}

br {
  line-height: 0;
}

input, textarea, select, button {
  font: inherit;
}

input, select, button {
  cursor: pointer;
}

/* safariでのデフォルトスタイルをリセット */
input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

:root {
  --font: "Noto Sans JP", sans-serif;
  --font-en: "REM", sans-serif;
  --color-text: #000;
  --color-bg: #fff;
  --color-secbg: #f5f4f2;
  --color-blue: #003A77;
  --color-white: #fff;
  --color-red: #FF0000;
  --content-width: clamp(100rem, 57.1428571429rem + 57.1428571429vw, 120rem);
  --spacing-xs: clamp(1rem, 1rem + 0vw, 1rem);
  --spacing-sm: clamp(2rem, 2rem + 0vw, 2rem);
  --spacing-md: clamp(4rem, 4rem + 0vw, 4rem);
  --spacing-lg: clamp(6rem, 6rem + 0vw, 6rem);
  --spacing-xl: clamp(8rem, 8rem + 0vw, 8rem);
}
@media (max-width: 768px) {
  :root {
    --spacing-xs: 1.3333333333vw;
    --spacing-sm: 2.6666666667vw;
    --spacing-md: 5.3333333333vw;
    --spacing-lg: 8vw;
    --spacing-xl: 10.6666666667vw;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font);
  font-size: clamp(1.4rem, 0.5428571429rem + 1.1428571429vw, 1.8rem);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  body {
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
  }
}

a {
  transition: all 0.3s ease;
}
@media (hover: hover) {
  a:not(:is([class*="--disabled"], [class*=is-disabled], [disabled])):hover:hover {
    opacity: 0.75;
  }
}

.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
}

.container {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.section-title {
  font-family: var(--font-en);
  font-size: clamp(3.2rem, -7.0857142857rem + 13.7142857143vw, 8rem);
  font-weight: 700;
  color: var(--color-blue);
  margin-block: 0 clamp(3rem, -3.4285714286rem + 8.5714285714vw, 6rem);
  position: relative;
  padding-inline: clamp(4rem, 1rem + 4vw, 5.4rem) 0;
}
@media (max-width: 768px) {
  .section-title {
    line-height: 1.2;
  }
}
.section-title::before {
  content: "";
  display: block;
  width: clamp(2.4rem, -0.1714285714rem + 3.4285714286vw, 3.6rem);
  height: clamp(2.4rem, -0.1714285714rem + 3.4285714286vw, 3.6rem);
  background: url(../img/title-icon.png) no-repeat left center/contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.section-title-ja {
  display: inline-block;
  font-family: var(--font);
  font-size: clamp(1.4rem, -0.3142857143rem + 2.2857142857vw, 2.2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-inline: clamp(1rem, -1.1428571429rem + 2.8571428571vw, 2rem) 0;
}
@media (max-width: 768px) {
  .section-title-ja {
    display: block;
    margin-inline: 0;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(2.2rem, 1.7714285714rem + 0.5714285714vw, 2.4rem) clamp(2rem, -2.2857142857rem + 5.7142857143vw, 4rem);
  width: 100%;
}
.header-logo {
  width: clamp(14.4rem, 14.4rem + 0vw, 14.4rem);
}
@media (max-width: 768px) {
  .header-logo {
    width: 23.7333333333vw;
  }
}
.header-logo img {
  width: 100%;
}

.kv-main img {
  width: 100%;
}

.about-inner {
  padding-block: clamp(4rem, -4.5714285714rem + 11.4285714286vw, 8rem);
  padding-inline: var(--spacing-md);
}
.about-text {
  color: var(--color-blue);
  font-size: clamp(1.4rem, -0.7428571429rem + 2.8571428571vw, 2.4rem);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
.profile {
  position: relative;
}
.profile::before {
  content: "";
  display: block;
  width: calc((100vw - var(--content-width)) / 2 + 336px);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-secbg);
  z-index: -1;
}
@media (max-width: 768px) {
  .profile::before {
    width: 74.1333333333vw;
    height: 90.6666666667vw;
  }
}
.profile-inner {
  padding-block: clamp(6rem, -6.8571428571rem + 17.1428571429vw, 12rem);
  padding-inline: var(--spacing-md);
  position: relative;
}
@media (max-width: 768px) {
  .profile-inner {
    padding-block: 8vw 0;
  }
}
.profile-column {
  display: flex;
  align-items: center;
  gap: clamp(3rem, -3.4285714286rem + 8.5714285714vw, 6rem);
}
@media (max-width: 768px) {
  .profile-column {
    flex-direction: column;
  }
}
.profile-image {
  width: clamp(21rem, -24rem + 60vw, 42rem);
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .profile-image {
    width: 66.6666666667vw;
  }
}
.profile-text {
  line-height: 2;
  margin-bottom: clamp(1.5rem, -1.7142857143rem + 4.2857142857vw, 3rem);
}
.profile-large {
  font-size: clamp(1.8rem, 0.5142857143rem + 1.7142857143vw, 2.4rem);
  line-height: 2;
}
.profile-sign {
  width: clamp(10.2rem, -11.6571428571rem + 29.1428571429vw, 20.4rem);
  position: absolute;
  right: clamp(3rem, -3.4285714286rem + 8.5714285714vw, 6rem);
  z-index: 1;
}
@media (max-width: 768px) {
  .profile-sign {
    margin-left: auto;
    position: static;
  }
}

.movie-inner {
  padding-block: clamp(6rem, -6.8571428571rem + 17.1428571429vw, 12rem) 0;
  padding-inline: var(--spacing-md);
  position: relative;
}
.movie-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 0.8571428571rem + 2.8571428571vw, 4rem);
  margin-block: clamp(3rem, -3.4285714286rem + 8.5714285714vw, 6rem) 0;
}
@media (max-width: 768px) {
  .movie-column {
    grid-template-columns: repeat(1, 1fr);
  }
}
.movie-title {
  text-align: center;
  margin-top: clamp(1.6rem, 1.6rem + 0vw, 1.6rem);
}
.movie-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  height: 0;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.visual {
  position: relative;
}
.visual::before {
  content: "";
  display: block;
  width: calc((100vw - var(--content-width)) / 2 + 1000px);
  position: absolute;
  right: 0;
  height: 60%;
  bottom: 0;
  background-color: var(--color-secbg);
  z-index: -1;
}
@media (max-width: 768px) {
  .visual::before {
    width: 77.3333333333vw;
    height: 186.6666666667vw;
  }
}
.visual-inner {
  padding-block: clamp(6rem, -6.8571428571rem + 17.1428571429vw, 12rem);
  padding-inline: var(--spacing-md);
  position: relative;
}
.visual-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 0.8571428571rem + 2.8571428571vw, 4rem);
  margin-block: clamp(3rem, -3.4285714286rem + 8.5714285714vw, 6rem) 0;
}
@media (max-width: 768px) {
  .visual-column {
    width: 64vw;
    margin-inline: auto;
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 769px) {
  .visual-item {
    cursor: pointer;
    border: clamp(0.3rem, 0.3rem + 0vw, 0.3rem) solid transparent;
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
}
@media (hover: hover) {
  .visual-item:not(:is([class*="--disabled"], [class*=is-disabled], [disabled])):hover {
    border-color: var(--color-red);
  }
}
@media (max-width: 768px) {
  .visual button {
    width: 9.3333333333vw;
    margin-left: auto;
    margin-block: 2.6666666667vw 0;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 120px 20px 100px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 9999;
}
@media (max-width: 768px) {
  .modal-overlay {
    padding: 13.3333333333vw 1.3333333333vw;
  }
}
@media (max-width: 480px) {
  .modal-overlay {
    align-items: center;
  }
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.is-open .modal-container {
  transform: translateY(0);
}
.modal-overlay .modal-container {
  position: relative;
  width: min(92%, 730px);
  transform: translateY(20px);
  transition: transform 0.4s ease;
}
.modal-overlay .modal-container img {
  width: 100%;
  height: auto;
  display: block;
}
.modal-overlay .modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  font-size: 32px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

body.modal-open {
  overflow: hidden;
}

.link-inner {
  padding-block: clamp(6rem, -6.8571428571rem + 17.1428571429vw, 12rem);
  padding-inline: var(--spacing-md);
  position: relative;
  text-align: center;
}
.link-text {
  text-align: center;
  color: var(--color-blue);
  font-size: clamp(1.4rem, 0.1142857143rem + 1.7142857143vw, 2rem);
  line-height: 2;
}
.link-a {
  display: block;
  width: clamp(20rem, 2.8571428571rem + 22.8571428571vw, 28rem);
  margin-inline: auto;
  font-size: clamp(1.6rem, 0.3142857143rem + 1.7142857143vw, 2.2rem);
  font-weight: 700;
  color: var(--color-blue);
  border: clamp(0.2rem, 0.2rem + 0vw, 0.2rem) solid var(--color-blue);
  margin-block: clamp(3rem, 3rem + 0vw, 3rem) clamp(5rem, -5.7142857143rem + 14.2857142857vw, 10rem);
  padding-block: clamp(1.6rem, 0.7428571429rem + 1.1428571429vw, 2rem);
  padding-inline: 0 clamp(1.5rem, -1.7142857143rem + 4.2857142857vw, 3rem);
  position: relative;
}
.link-a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(3rem, 3rem + 0vw, 3rem);
  width: clamp(1.8rem, -2.0571428571rem + 5.1428571429vw, 3.6rem);
  height: clamp(0.5rem, -0.5714285714rem + 1.4285714286vw, 1rem);
  margin: auto;
  background: center/contain url(../img/icon-a.png) no-repeat;
  transition: transform 0.3s ease;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .link-a::after {
    right: 4.2666666667vw;
  }
}
@media (hover: hover) {
  .link-a:not(:is([class*="--disabled"], [class*=is-disabled], [disabled])):hover::after {
    transform: translateX(clamp(0.8rem, 0.8rem + 0vw, 0.8rem));
  }
}
.link-b {
  display: block;
  width: clamp(30rem, 5.5714285714rem + 32.5714285714vw, 41.4rem);
  margin-inline: auto;
  font-size: clamp(1.8rem, 0.5142857143rem + 1.7142857143vw, 2.4rem);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-blue);
  padding-block: clamp(1.8rem, -1.2rem + 4vw, 3.2rem);
  padding-inline: 0 clamp(1.5rem, -1.7142857143rem + 4.2857142857vw, 3rem);
  position: relative;
}
.link-b:last-of-type {
  margin-block: clamp(1.5rem, -1.7142857143rem + 4.2857142857vw, 3rem);
}
.link-b::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(3rem, 3rem + 0vw, 3rem);
  width: clamp(1.8rem, -2.0571428571rem + 5.1428571429vw, 3.6rem);
  height: clamp(0.5rem, -0.5714285714rem + 1.4285714286vw, 1rem);
  margin: auto;
  background: center/contain url(../img/icon-b.png) no-repeat;
  transition: transform 0.3s ease;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .link-b::after {
    right: 4.2666666667vw;
  }
}
@media (hover: hover) {
  .link-b:not(:is([class*="--disabled"], [class*=is-disabled], [disabled])):hover::after {
    transform: translateX(clamp(0.8rem, 0.8rem + 0vw, 0.8rem));
  }
}

.footer {
  background-color: var(--color-blue);
}
.footer-inner {
  padding-block: clamp(1rem, 1rem + 0vw, 1rem);
  padding-inline: var(--spacing-md);
}
@media (max-width: 768px) {
  .footer-inner {
    padding-block: 4vw;
  }
}
.footer-copyright {
  text-align: center;
  font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  font-weight: 400;
  color: var(--color-white);
}