@charset "UTF-8";
/* --------------------------------------------------
Top & Lead
-------------------------------------------------- */
body #wrapper .page-contents .top { position: relative; }
body #wrapper .page-contents .top .imagearea { overflow: hidden; }
body #wrapper .page-contents .top .imagearea img { aspect-ratio: 1125 / 1962; display: block; transform: scale(1.05); }
body #wrapper .page-contents .top .logo { width: 32%; position: absolute; left: 5.33%; top: 3.06%; z-index: 2; opacity: 0; }
body #wrapper .page-contents .top .logo img { aspect-ratio: 500 / 390; }
body #wrapper .page-contents .top .title { width: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; }
body #wrapper .page-contents .top .title img { aspect-ratio: 500 / 103; }
body #wrapper .page-contents .lead { padding: 11.6rem 0 4rem; }
body #wrapper .page-contents .lead .inner { padding: 0 5.33%; }
body #wrapper .page-contents .lead .inner .textarea { margin: 0 0 5rem; }
body #wrapper .page-contents .lead .inner .textarea .text { text-align: justify; font-weight: 500; font-size: 1.5rem; line-height: 1.8; }
body #wrapper .page-contents .lead .inner .movie-container .moviearea video { aspect-ratio: 16 / 9; }
body #wrapper .page-contents .lead .inner .movie-container .iconarea { margin: 0 0 0 -1rem; }
body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon { width: 4rem; }
body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon a { display: inline-block; padding: 1rem; }
body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon img { aspect-ratio: 100 / 82; }
body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon#sound-on { display: none; }
body.is-loaded #wrapper .page-contents .top .imagearea img { transform: none; transition: transform 2s var(--easeout) 0s; }
body.is-loaded #wrapper .page-contents .top .logo, body.is-loaded #wrapper .page-contents .top .title { opacity: 1; transition: opacity 1s var(--easeout) 1s; }

@media screen and (orientation: landscape) { body #wrapper .page-contents .top .imagearea img { aspect-ratio: 1440 / 720; }
  body #wrapper .page-contents .top .logo { width: 13.19%; left: 3.26%; top: 7.08%; }
  body #wrapper .page-contents .top .title { width: 29.86%; left: 60.56%; top: 44.86%; transform: none; } }
@media screen and (min-width: 768px) { body #wrapper .page-contents .lead { padding: 16rem 0 13rem; }
  body #wrapper .page-contents .lead .inner { padding: 0 3.33%; }
  body #wrapper .page-contents .lead .inner .textarea { margin: 0 0 7rem; }
  body #wrapper .page-contents .lead .inner .textarea .text { text-align: center; font-size: 1.4rem; line-height: 2; }
  body #wrapper .page-contents .lead .inner .movie-container .iconarea { margin: 0; }
  body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon { width: 6.2rem; }
  body #wrapper .page-contents .lead .inner .movie-container .iconarea .sound-icon a { padding: 1.6rem; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper .page-contents { background: var(--acc-bgcolor); }
body #wrapper .page-contents .interview-wrapper { display: flex; flex-direction: column; row-gap: calc(var(--vw) * (0.2667 * 100)); }
body #wrapper .page-contents .interview-wrapper .group { display: flex; flex-direction: column; row-gap: calc(var(--vw) * (0.1333 * 100)); }
body #wrapper .page-contents .interview-wrapper .group .text-container { padding: 0 5.33%; display: flex; }
body #wrapper .page-contents .interview-wrapper .group .text-container .textarea { width: 89.55%; font-size: 1.5rem; line-height: 1.8; letter-spacing: -0.02em; }
body #wrapper .page-contents .interview-wrapper .group .text-container .textarea .question { color: var(--acc-color); font-weight: 700; }
body #wrapper .page-contents .interview-wrapper .group .text-container .textarea .question::before { display: inline; content: "ー"; margin: 0 0.35em 0 0; }
body #wrapper .page-contents .interview-wrapper .group .image-container { width: 85.33%; }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea { opacity: 0; transform: translate(0, 2rem); }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea img { aspect-ratio: 2 / 3; }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea ul { display: flex; }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea ul li { width: 50%; }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea.landscape img { aspect-ratio: 3 / 2; }
body #wrapper .page-contents .interview-wrapper .group .image-container .imagearea.is-show { opacity: 1; transform: none; transition: opacity 2s var(--ease) 0s, transform 2s var(--ease) 0s; }
body #wrapper .page-contents .interview-wrapper .group:nth-child(2n) .text-container { justify-content: flex-end; }
body #wrapper .page-contents .interview-wrapper .group:nth-child(2n) .image-container { margin: 0 0 0 auto; }

@media screen and (min-width: 768px) { body #wrapper .page-contents .interview-wrapper { row-gap: 0; }
  body #wrapper .page-contents .interview-wrapper .group { flex-direction: row; align-items: flex-start; }
  body #wrapper .page-contents .interview-wrapper .group .text-container { width: 50%; padding: 10.42% 3.47%; min-height: 100vh; position: sticky; left: 0; top: 0; } }
@media screen and (min-width: 768px) and (max-width: 1439px) { body #wrapper .page-contents .interview-wrapper .group .text-container { padding: 15rem 3.47%; } }
@media screen and (min-width: 768px) { body #wrapper .page-contents .interview-wrapper .group .text-container .textarea { width: 70.16%; font-size: 1.4rem; line-height: 2; }
  body #wrapper .page-contents .interview-wrapper .group .image-container { width: 50%; }
  body #wrapper .page-contents .interview-wrapper .group:nth-child(2n) { flex-direction: row-reverse; }
  body #wrapper .page-contents .interview-wrapper .group:nth-child(2n) .image-container { margin: 0; }
  body #wrapper .page-contents .interview-wrapper .group--2, body #wrapper .page-contents .interview-wrapper .group--3 { align-items: flex-end; }
  body #wrapper .page-contents .interview-wrapper .group--2 .text-container, body #wrapper .page-contents .interview-wrapper .group--3 .text-container { top: auto; bottom: 0; } }
/* --------------------------------------------------
Contents Footer
-------------------------------------------------- */
body #wrapper .page-contents .contents-footer { background: var(--bg-color); }
body #wrapper .page-contents .contents-footer .inner { padding: 0 5.33%; }
body #wrapper .page-contents .contents-footer .inner .profile { margin: 0 0 10rem; }
body #wrapper .page-contents .contents-footer .inner .profile .imagearea { margin: 0 0 2.5rem; }
body #wrapper .page-contents .contents-footer .inner .profile .imagearea img { aspect-ratio: 800 / 529; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea { display: flex; flex-direction: column; row-gap: 2.4rem; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea .namearea { display: flex; align-items: baseline; column-gap: 1.5rem; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea .namearea .name-jp { font-weight: 700; font-size: 2.4rem; line-height: 2; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea .namearea .name-en { font-family: var(--font-en); font-size: 1.4rem; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea .biography .title { font-family: var(--font-en); font-size: 1.5rem; margin: 0 0 1rem; }
body #wrapper .page-contents .contents-footer .inner .profile .textarea .biography .text { text-align: justify; font-size: 1.3rem; line-height: 1.92; }
body #wrapper .page-contents .contents-footer .inner .link-btn { width: 26rem; height: 5rem; margin: 0 auto; font-weight: 500; font-size: 1.5rem; }
body #wrapper .page-contents .contents-footer .inner .link-btn a { height: 100%; display: flex; justify-content: center; align-items: center; border: 0.1rem solid var(--primary-color); }

@media screen and (min-width: 768px) { body #wrapper .page-contents .contents-footer .inner { padding: 0; width: 89.44%; max-width: 150rem; margin: 0 auto; }
  body #wrapper .page-contents .contents-footer .inner .profile { width: clamp(80rem, 62.11%, 93.17rem); margin: 0 auto 15rem; }
  body #wrapper .page-contents .contents-footer .inner .profile .imagearea { margin: 0 0 3.5rem; }
  body #wrapper .page-contents .contents-footer .inner .profile .textarea { flex-direction: row; }
  body #wrapper .page-contents .contents-footer .inner .profile .textarea .namearea { width: 18rem; display: block; }
  body #wrapper .page-contents .contents-footer .inner .profile .textarea .biography { flex: 1; padding: 1.5rem 0 0; }
  body #wrapper .page-contents .contents-footer .inner .link-btn { width: 28rem; height: 6rem; font-size: 1.6rem; }
  body #wrapper .page-contents .contents-footer .inner .link-btn a { transition: background 0.4s var(--ease) 0s, border-color 0.4s var(--ease) 0s; }
  body #wrapper .page-contents .contents-footer .inner .link-btn a:hover { background: var(--acc-color); border-color: var(--acc-color); } }