/* --------------------------------------------------
Top
-------------------------------------------------- */
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: #96810B;
}
body #wrapper:not(.menu-open) header .header-inner #menu-toggle a::before {
  background: #96810B;
}
body #wrapper #top .visual {
  position: relative;
}
body #wrapper #top .visual .media img {
  height: calc(var(--vh) * 1 * 100);
  object-fit: cover;
  object-position: center;
}
body #wrapper #top .visual .heading {
  position: absolute;
  left: 75.35%;
  top: 69.6%;
  width: 41.63%;
  color: #FFFFFF;
  transform: translate(-50%, -50%);
}
body #wrapper #top .visual .heading .title svg .st0 {
  fill: currentColor;
  opacity: 0;
}
body #wrapper #top .visual .heading .title svg .st1 {
  fill: none;
  stroke: currentColor;
  stroke-miterlimit: 10;
  stroke-width: 3.1px;
  stroke-dashoffset: 700;
  stroke-dasharray: 700;
}
body #wrapper #top .content {
  padding: 40px 6.05% 80px;
}
body #wrapper #top .content .staffCredit {
  margin: 0 0 64px;
}
body #wrapper #top .content .staffCredit p {
  font-weight: 300;
  font-size: 0.87rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
body #wrapper #top .content .body 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: 0.03em;
}
body.is-loaded #wrapper #top .visual .heading .title .st0 {
  opacity: 1;
  transition: opacity 1.6s ease 1s;
}
body.is-loaded #wrapper #top .visual .heading .title .st0#text2 {
  transition-delay: 1.5s;
}
body.is-loaded #wrapper #top .visual .heading .title .st0#text3 {
  transition-delay: 2s;
}
body.is-loaded #wrapper #top .visual .heading .title .st0#text4 {
  transition-delay: 2.5s;
}
body.is-loaded #wrapper #top .visual .heading .title .st1 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease 1.7s;
}
body.is-loaded #wrapper #top .visual .heading .title .st1#line2 {
  transition-delay: 2.2s;
}
body.is-loaded #wrapper #top .visual .heading .title .st1#line3 {
  transition-delay: 2.7s;
}

@media screen and (orientation: landscape) {
  body #wrapper header .header-inner #menu-wrapper .menu-inner .level-1 > li {
    color: #96810B;
  }
  body #wrapper #top .visual {
    background: #264832;
  }
  body #wrapper #top .visual .media {
    width: 33.19%;
    margin-inline: auto;
  }
  body #wrapper #top .visual .heading {
    left: 75.21%;
    top: 51.67%;
    width: 12.85%;
    color: #96810B;
    transform: translate(0, -50%);
  }
}
@media screen and (min-width: 768px) {
  body #wrapper #top .content {
    padding: 60px 0 117px;
    width: 80.56%;
    margin: 0 auto;
    display: flex;
  }
  body #wrapper #top .content .staffCredit {
    margin: 0;
    width: 42.24%;
  }
  body #wrapper #top .content .staffCredit p {
    font-size: 1rem;
  }
  body #wrapper #top .content .body {
    flex: 1;
  }
  body #wrapper #top .content .body p {
    font-size: 1.5rem;
  }
}
/* --------------------------------------------------
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 img {
  aspect-ratio: auto;
}
body #wrapper #interview {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
body #wrapper #interview .section {
  display: grid;
  gap: 18.6vw;
  grid-template-columns: minmax(0, 1fr);
  margin-block: 0 18.6%;
}
body #wrapper #interview .section .visual .medias {
  display: grid;
  gap: 11.63vw;
}
body #wrapper #interview .section .visual .medias--special {
  gap: 27.91vw;
}
body #wrapper #interview .section .visual .medias--special .media--portlait {
  width: 81.4%;
  margin-inline: auto;
}
body #wrapper #interview .section .visual .medias--special .media--portlait.align--left {
  margin-inline: 0;
}
body #wrapper #interview .section .visual .medias--special .media--portlait.align--right {
  margin-inline: auto 0;
}
body #wrapper #interview .section .visual .medias .media {
  opacity: 0;
  transform: translate(0, 2rem);
}
body #wrapper #interview .section .visual .medias .media--landscape {
  aspect-ratio: 1250/841;
}
body #wrapper #interview .section .visual .medias .media--portlait {
  aspect-ratio: 2/3;
}
body #wrapper #interview .section .visual .medias .media--special {
  aspect-ratio: 415/294;
  mix-blend-mode: darken;
}
body #wrapper #interview .section .visual .medias .media.is-show {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease 0s, transform 1s ease 0s;
}
body #wrapper #interview .section .visual .note {
  display: grid;
  gap: 1.87em;
  margin-block: 1.5rem 0;
  padding-inline: 6.05%;
  font-size: 1.31rem;
  line-height: 1.87;
  letter-spacing: 0.05em;
  text-align: justify;
  color: #96810B;
}
body #wrapper #interview .section .visual .note .text--en {
  text-align: left;
}
body #wrapper #interview .section .content {
  padding-inline: 6.05%;
}
body #wrapper #interview .section .content .tagline {
  margin-block: 0 2.62rem;
  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 .section .content .body {
  font-size: 1.31rem;
  line-height: 1.87;
  letter-spacing: 0.05em;
  text-align: justify;
}
body #wrapper #interview .section .content .body .question {
  font-weight: 700;
  color: #2C4836;
}
body #wrapper #interview .section .content .body .comment + .question {
  margin-block: 1.87em 0;
}
body #wrapper #interview .profile {
  padding-inline: 8.37%;
}
body #wrapper #interview .profile .name {
  display: flex;
  gap: 0.87rem;
  align-items: baseline;
  margin-block: 0 0.78rem;
}
body #wrapper #interview .profile .name .en {
  font-family: neue-haas-unica, sans-serif;
  font-size: 1.74rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
body #wrapper #interview .profile .name .jp {
  font-size: 1.13rem;
  letter-spacing: 0.05em;
}
body #wrapper #interview .profile .job {
  margin-block: 0 2.97rem;
  font-size: 1.22rem;
  line-height: 2;
  letter-spacing: 0.05em;
}
body #wrapper #interview .profile .biography {
  font-size: 1.22rem;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
}
body #wrapper #interview .btnarea {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.74rem;
  margin: 23.26% 0;
}
body #wrapper #interview .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 #interview .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 {
    width: min(175rem, 86.81%);
    margin-inline: auto;
  }
  body #wrapper #interview .section {
    gap: min(21rem, 10.42vw);
    margin-block: 0 12%;
  }
  body #wrapper #interview .section .visual .medias {
    gap: min(21rem, 10.42vw);
  }
  body #wrapper #interview .section .visual .medias--special {
    gap: min(21rem, 10.42vw);
  }
  body #wrapper #interview .section .visual .medias--special .media--portlait {
    width: 48%;
  }
  body #wrapper #interview .section .visual .medias .media--portlait {
    width: 48%;
    margin-inline: auto;
  }
  body #wrapper #interview .section .visual .medias .media--special {
    width: 66.4%;
    margin-inline: auto;
  }
  body #wrapper #interview .section .visual .note {
    gap: 2em;
    width: min(90%, max(83rem, 66.4%));
    margin-inline: auto;
    padding-inline: 0;
    font-size: 1.4rem;
    line-height: 2;
  }
  body #wrapper #interview .section .visual .note .text {
    width: fit-content;
    justify-self: center;
  }
  body #wrapper #interview .section .visual .note .text--en {
    width: 100%;
  }
  body #wrapper #interview .section .content {
    width: min(90%, max(83rem, 66.4%));
    margin-inline: auto;
    padding-inline: 0;
  }
  body #wrapper #interview .section .content .tagline {
    margin-block: 0 5rem;
    font-size: 3.3rem;
    line-height: 1.52;
  }
  body #wrapper #interview .section .content .body {
    font-size: 1.4rem;
    line-height: 2;
  }
  body #wrapper #interview .section .content .body .comment + .question {
    margin-block: 2em 0;
  }
  body #wrapper #interview .section:has(+ .profile) {
    margin-block: 0 8%;
  }
  body #wrapper #interview .profile {
    width: min(85%, max(60rem, 48%));
    margin-inline: auto;
    padding-inline: 0;
  }
  body #wrapper #interview .profile .name {
    gap: 1rem;
    margin-block: 0 0.9rem;
  }
  body #wrapper #interview .profile .name .en {
    font-size: 2rem;
  }
  body #wrapper #interview .profile .name .jp {
    font-size: 1.3rem;
  }
  body #wrapper #interview .profile .job {
    margin-block: 0 2rem;
    font-size: 1.4rem;
  }
  body #wrapper #interview .profile .biography {
    font-size: 1.4rem;
  }
  body #wrapper #interview .btnarea {
    flex-direction: row;
    justify-content: center;
    column-gap: 8rem;
    margin-block: 11.11% 14.81%;
  }
  body #wrapper #interview .btnarea .all-link {
    width: 37rem;
    height: 7.8rem;
    font-size: 1.3rem;
  }
  body #wrapper #interview .btnarea .all-link a {
    border-radius: 3.9rem;
    transition: background 0.4s ease 0s, color 0.4s ease 0s;
  }
  body #wrapper #interview .btnarea .all-link a:hover {
    background: #000000;
    color: #F0EFEB;
  }
}