/* --------------------------------------------------
Top
-------------------------------------------------- */
body #wrapper #top .image-container { position: relative; }
body #wrapper #top .image-container .imagearea img { height: calc(var(--vh) * (1 * 100)); object-fit: cover; object-position: center; filter: grayscale(1) brightness(0); }
body #wrapper #top .image-container .titlearea { width: 20.93%; position: absolute; left: 50%; top: 43.6%; transform: translate(-50%, -50%); }
body #wrapper #top .image-container .titlearea h2 img { aspect-ratio: 130 / 402; }
body #wrapper #top .textarea { padding: 40px 6.05% 80px; }
body #wrapper #top .textarea .staff-credit { margin: 0 0 64px; }
body #wrapper #top .textarea .staff-credit p { font-weight: 300; font-size: 0.87rem; line-height: 1.8; letter-spacing: .08em; }
body #wrapper #top .textarea .lead-text p { text-align: justify; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-size: 1.31rem; line-height: 1.87; letter-spacing: .03em; }
body.is-loaded #wrapper #top .image-container .imagearea img { filter: grayscale(0) brightness(1); transition: filter 1.6s ease 1s; }

@media screen and (orientation: landscape) { body #wrapper #top .image-container .titlearea { width: 9.03%; top: 50%; } }
@media screen and (min-width: 768px) { body #wrapper #top .textarea { padding: 60px 0 117px; width: 80.56%; margin: 0 auto; display: flex; }
  body #wrapper #top .textarea .staff-credit { margin: 0; width: 42.24%; }
  body #wrapper #top .textarea .staff-credit p { font-size: 1rem; }
  body #wrapper #top .textarea .lead-text { flex: 1; }
  body #wrapper #top .textarea .lead-text p { font-size: 1.5rem; } }
/* --------------------------------------------------
header
-------------------------------------------------- */
body #wrapper:not(.menu-open) header .header-inner .logo { filter: invert(1); }
body #wrapper:not(.menu-open) header .header-inner #menu-toggle a i::before, body #wrapper:not(.menu-open) header .header-inner #menu-toggle a i::after { background: #000000; }
body #wrapper:not(.menu-open) header .header-inner #menu-toggle a::before { background: #000000; }

@media screen and (min-width: 768px) { body #wrapper header .header-inner #menu-wrapper .menu-inner .level-1 > li { color: #000000; }
  body #wrapper header .header-inner #menu-wrapper .menu-inner .level-1 > li .level-2 > li { color: #000000; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
@keyframes hoverline { 0% { transform: scale(1); transform-origin: right; }
  33.3% { transform: scale(0, 1); transform-origin: right; }
  66.6% { transform: scale(0, 1); transform-origin: left; }
  100% { transform: scale(1); transform-origin: left; } }
body { background: #F0EFEB; }
body #wrapper #interview-wrapper { padding: 0 0 23.26%; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }
body #wrapper #interview-wrapper .inner { display: flex; flex-direction: column; row-gap: 11.63vw; }
body #wrapper #interview-wrapper .inner .block { text-align: justify; display: flex; flex-direction: column; row-gap: 11.63vw; }
body #wrapper #interview-wrapper .inner .block .titlearea { padding: 0 6.05%; margin: 0 0 -4.66%; }
body #wrapper #interview-wrapper .inner .block .titlearea .catch { font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; font-size: 1.92rem; line-height: 1.59; letter-spacing: 0.05em; }
body #wrapper #interview-wrapper .inner .block .textarea { padding: 0 6.05%; font-size: 1.31rem; line-height: 1.87; letter-spacing: 0.05em; }
body #wrapper #interview-wrapper .inner .block .textarea .question { font-weight: 700; }
body #wrapper #interview-wrapper .inner .block .textarea b { font-weight: 700; }
body #wrapper #interview-wrapper .inner .block .image-container { width: 81.4%; }
body #wrapper #interview-wrapper .inner .block .image-container .imagearea { opacity: 0; transform: translate(0, 2rem); }
body #wrapper #interview-wrapper .inner .block .image-container .imagearea img { aspect-ratio: 500 / 750; }
body #wrapper #interview-wrapper .inner .block .image-container .imagearea img.landscape { aspect-ratio: 1160 / 750; }
body #wrapper #interview-wrapper .inner .block .image-container .imagearea img.special { aspect-ratio: 860 / 854; }
body #wrapper #interview-wrapper .inner .block .image-container .imagearea.is-show { opacity: 1; transform: none; transition: opacity 1s ease 0s, transform 1s ease 0s; }
body #wrapper #interview-wrapper .inner .block .image-container .image-caption { margin: 0.87rem 0 0; }
body #wrapper #interview-wrapper .inner .block .image-container .image-caption .caption { color: #838383; font-size: 1.13rem; line-height: 1.85; letter-spacing: 0.05em; }
body #wrapper #interview-wrapper .inner .block .image-container .profile { margin: 1.74rem 0 0; padding: 0 6.05%; color: #333333; }
body #wrapper #interview-wrapper .inner .block .image-container .profile .name { font-family: dnp-shuei-mincho-pr6, sans-serif; font-size: 1.57rem; letter-spacing: 0.05em; margin: 0 0 0.87rem; }
body #wrapper #interview-wrapper .inner .block .image-container .profile .name span { font-size: 1.05rem; }
body #wrapper #interview-wrapper .inner .block .image-container .profile .job, body #wrapper #interview-wrapper .inner .block .image-container .profile .biography { font-size: 1.13rem; line-height: 1.85; letter-spacing: 0.05em; }
body #wrapper #interview-wrapper .inner .block .image-container .profile .job { margin: 0 0 1.31rem; }
body #wrapper #interview-wrapper .inner .block .image-container.full { width: 100%; }
body #wrapper #interview-wrapper .inner .block .image-container.full .image-caption { padding: 0 6.05%; }
body #wrapper #interview-wrapper .inner .block .image-container.closing { width: 100%; }
body #wrapper #interview-wrapper .inner .block .image-container.align-center { margin: 0 auto; }
body #wrapper #interview-wrapper .inner .block .image-container.align-right { margin: 0 0 0 auto; }
body #wrapper #interview-wrapper .inner .block .flex-container { display: flex; flex-direction: column; row-gap: 11.63vw; }
body #wrapper #interview-wrapper .inner .block .flex-container .column { display: contents; }
body #wrapper #interview-wrapper .inner .block .flex-container .column .element.order1 { order: 1; }
body #wrapper #interview-wrapper .inner .block .flex-container .column .element.order2 { order: 2; }
body #wrapper #interview-wrapper .inner .block .flex-container .column .element.order3 { order: 3; }
body #wrapper #interview-wrapper .inner .block .flex-container .column .element.order4 { order: 4; }
body #wrapper #interview-wrapper .inner .block .scroll-contaner { display: flex; column-gap: 3.72%; overflow: auto; padding: 0 6.05%; }
body #wrapper #interview-wrapper .inner .block .scroll-contaner .image-container { width: 69.77%; flex: none; }
body #wrapper .btnarea { display: flex; flex-direction: column; align-items: center; row-gap: 1.74rem; margin: 23.26% 0 0; }
body #wrapper .btnarea .all-link { width: 87.91%; height: 7.15rem; text-align: center; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; font-size: 1.31rem; line-height: 1.6; letter-spacing: 0.05em; }
body #wrapper .btnarea .all-link a { height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 3.58rem; border: solid 1px #000000; }

@media screen and (min-width: 768px) { body #wrapper #interview-wrapper { padding: 0 0 9.03%; }
  body #wrapper #interview-wrapper .inner { row-gap: 18rem; width: 80.56%; max-width: 116rem; margin: 0 auto; }
  body #wrapper #interview-wrapper .inner .block { row-gap: 7rem; }
  body #wrapper #interview-wrapper .inner .block .titlearea { padding: 0; margin: 0; }
  body #wrapper #interview-wrapper .inner .block .titlearea .catch { font-size: 3.3rem; line-height: 1.52; }
  body #wrapper #interview-wrapper .inner .block .textarea { padding: 0; font-size: 1.4rem; line-height: 2; }
  body #wrapper #interview-wrapper .inner .block .image-container { width: 100%; position: relative; }
  body #wrapper #interview-wrapper .inner .block .image-container .imagearea img.special { aspect-ratio: 900 / 598; }
  body #wrapper #interview-wrapper .inner .block .image-container .image-caption { margin: 0; position: absolute; left: 0; right: 0; top: calc(100% + 1.5rem); }
  body #wrapper #interview-wrapper .inner .block .image-container .image-caption .caption { font-size: 1.3rem; line-height: 1.92; }
  body #wrapper #interview-wrapper .inner .block .image-container .profile { margin: 1.5rem 0 0; padding: 0; }
  body #wrapper #interview-wrapper .inner .block .image-container .profile .name { font-size: 1.8rem; margin: 0 0 1rem; }
  body #wrapper #interview-wrapper .inner .block .image-container .profile .name span { font-size: 1.2rem; }
  body #wrapper #interview-wrapper .inner .block .image-container .profile .job, body #wrapper #interview-wrapper .inner .block .image-container .profile .biography { font-size: 1.3rem; line-height: 1.92; }
  body #wrapper #interview-wrapper .inner .block .image-container .profile .job { margin: 0 0 1.5rem; }
  body #wrapper #interview-wrapper .inner .block .image-container.full .image-caption { padding: 0; width: 43.1%; margin-left: auto; }
  body #wrapper #interview-wrapper .inner .block .image-container.closing { width: 77.33%; margin: 0 auto; }
  body #wrapper #interview-wrapper .inner .block .flex-container { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  body #wrapper #interview-wrapper .inner .block .flex-container .column { display: block; width: 43.1%; }
  body #wrapper #interview-wrapper .inner .block .flex-container .column.column-image { position: sticky; left: 0; top: 2rem; display: flex; flex-direction: column; row-gap: 2rem; }
  body #wrapper #interview-wrapper .inner .block .flex-container .column.column-text .titlearea { margin: 0 0 7rem; }
  body #wrapper #interview-wrapper .inner .block .scroll-contaner { column-gap: 0; padding: 0; justify-content: space-between; }
  body #wrapper #interview-wrapper .inner .block .scroll-contaner .image-container { width: 49.14%; }
  body #wrapper #interview-wrapper .inner .block.block12 { margin: 0 0 -11rem; }
  body #wrapper .btnarea { flex-direction: row; justify-content: center; column-gap: 8rem; margin: 9.38% 0 0; }
  body #wrapper .btnarea .all-link { width: 37rem; height: 7.8rem; font-size: 1.3rem; }
  body #wrapper .btnarea .all-link a { border-radius: 3.9rem; transition: background .4s ease 0s, color .4s ease 0s; }
  body #wrapper .btnarea .all-link a:hover { background: #000000; color: #F0EFEB; } }