@media only screen and (max-width: 960px) {
  .p-intro-inr, .p-interview-inr {
    padding: 0 20px; } }
@media print, screen and (min-width: 961px) {
  .p-intro-inr, .p-interview-inr {
    width: 100%;
    max-width: 860px;
    padding: 0 30px;
    margin: 0 auto; } }

@media only screen and (max-width: 960px) {
  .p-entry-inr {
    padding: 0 20px; } }
@media print, screen and (min-width: 961px) {
  .p-entry-inr {
    width: 100%;
    max-width: 1020px;
    padding: 0 30px;
    margin: 0 auto; } }

.p-mv {
  color: #fff; }
  @media only screen and (max-width: 960px) {
    .p-mv {
      padding: 90px 0 0; } }
  @media print, screen and (min-width: 961px) {
    .p-mv {
      padding: 180px 0 0; } }

.p-mv-inr:after {
  content: "";
  display: block;
  clear: both; }

@media print, screen and (min-width: 961px) {
  .p-mv-head {
    width: 55%;
    float: left; } }

@media only screen and (max-width: 960px) {
  .p-mv-back a {
    font-size: 12px;
    font-size: 0.75rem; } }
@media print, screen and (min-width: 961px) {
  .p-mv-back a {
    font-size: 14px;
    font-size: 0.875rem; } }
.p-mv-back a:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  background: url(/benesseinfo/saiyou/_assets2024/_common/img/c-arr-wh.png) 50% 50%/contain no-repeat;
  transform: rotate(180deg);
  margin-right: 5px; }

.p-mv-ttl {
  display: inline-block;
  transform: translate(0, 20px);
  opacity: 0; }
  @media only screen and (max-width: 960px) {
    .p-mv-ttl {
      font-size: 28px;
      font-size: 1.75rem;
      margin: 50px 0 35px; } }
  @media print, screen and (min-width: 961px) {
    .p-mv-ttl {
      font-size: 40px;
      font-size: 2.5rem;
      margin: 100px 0; } }
  .p-mv-ttl span {
    display: block; }
    @media only screen and (max-width: 960px) {
      .p-mv-ttl span {
        font-size: 12px;
        font-size: 0.75rem;
        margin-bottom: 10px; } }
    @media print, screen and (min-width: 961px) {
      .p-mv-ttl span {
        font-size: 18px;
        font-size: 1.125rem;
        margin-bottom: 25px; } }

.p-mv-photo {
  text-align: center;
  overflow: hidden;
  transform: translate(0, 20px);
  clip-path: inset(0 0 100% 0);
  opacity: 0; }
  @media only screen and (max-width: 960px) {
    .p-mv-photo {
      margin: 0 10px; } }
  @media print, screen and (min-width: 961px) {
    .p-mv-photo {
      width: 45%;
      float: right; } }
  .p-mv-photo img {
    width: 100%;
    transform-origin: 50% 0;
    transform: scale(1.3); }

.p-mv-body {
  transform: translate(0, 20px);
  opacity: 0; }
  @media only screen and (max-width: 960px) {
    .p-mv-body {
      margin: 35px 10px; } }
  @media print, screen and (min-width: 961px) {
    .p-mv-body {
      width: 50%;
      float: left; } }

@media only screen and (max-width: 960px) {
  .p-mv-data {
    font-size: 12px;
    font-size: 0.75rem; } }
@media print, screen and (min-width: 961px) {
  .p-mv-data {
    font-size: 14px;
    font-size: 0.875rem; } }
.p-mv-data dt {
  margin-bottom: 1em;
  font-weight: bold; }

.p-mv-tags {
  margin-top: 20px; }
  @media only screen and (max-width: 960px) {
    .p-mv-tags {
      font-size: 10px;
      font-size: 0.625rem; } }
  @media print, screen and (min-width: 961px) {
    .p-mv-tags {
      font-size: 12px;
      font-size: 0.75rem; } }
  .p-mv-tags li {
    display: inline-block; }
    .p-mv-tags li:not(:last-child) {
      margin-right: 10px; }
  .p-mv-tags a {
    text-decoration: underline; }

.is-anime .p-mv-ttl {
  transform: translate(0, 0);
  opacity: 1; }
  @media only screen and (max-width: 960px) {
    .is-anime .p-mv-ttl {
      transition: opacity 1s, transform 1s; } }
  @media print, screen and (min-width: 961px) {
    .is-anime .p-mv-ttl {
      transition: opacity 1s .4s, transform 1s .4s; } }
.is-anime .p-mv-photo {
  transform: translate(0, 0);
  clip-path: inset(0 0 0 0);
  opacity: 1; }
  @media only screen and (max-width: 960px) {
    .is-anime .p-mv-photo {
      transition: opacity 1s .4s, clip-path 1s .4s, transform 1s .4s; } }
  @media print, screen and (min-width: 961px) {
    .is-anime .p-mv-photo {
      transition: opacity 1s, clip-path 1s, transform 1s; } }
  .is-anime .p-mv-photo img {
    transform: scale(1); }
    @media only screen and (max-width: 960px) {
      .is-anime .p-mv-photo img {
        transition: transform 1s .4s; } }
    @media print, screen and (min-width: 961px) {
      .is-anime .p-mv-photo img {
        transition: transform 1s; } }
.is-anime .p-mv-body {
  transform: translate(0, 0);
  opacity: 1;
  transition: opacity 1s .8s, transform 1s .8s; }

.p-intro {
  transform: translate(0, 20px);
  opacity: 0; }
  @media only screen and (max-width: 960px) {
    .p-intro {
      margin: 100px 0 50px; } }
  @media print, screen and (min-width: 961px) {
    .p-intro {
      margin: 200px 0 100px; } }

.p-intro-inr > p:not(:first-child) {
  margin-top: 1em; }

.is-anime.p-intro {
  transform: translate(0, 0);
  opacity: 1;
  transition: opacity 2s, transform 1s; }

.p-interview {
  padding-top: 0; }

.p-interview-mv {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  transform: translate(0, 20px);
  opacity: 0;
  clip-path: inset(0 0 100% 0); }
  @media only screen and (max-width: 960px) {
    .p-interview-mv {
      margin-bottom: 40px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-mv {
      margin-bottom: 80px; } }
  .p-interview-mv img {
    width: 100%;
    transform-origin: 50% 0;
    transform: scale(1.3); }
  @media only screen and (max-width: 960px) {
    .p-interview-mv figcaption {
      font-size: 10px;
      font-size: 0.625rem;
      margin-top: 10px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-mv figcaption {
      font-size: 12px;
      font-size: 0.75rem;
      margin-top: 15px; } }

.p-interview-hl {
  position: relative;
  opacity: 0; }
  @media only screen and (max-width: 960px) {
    .p-interview-hl {
      padding: 20px 30px;
      font-size: 20px;
      font-size: 1.25rem;
      margin-bottom: 40px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-hl {
      padding: 25px 60px;
      font-size: 24px;
      font-size: 1.5rem;
      margin-bottom: 80px; } }
  .p-interview-hl span {
    display: block;
    clip-path: inset(0 100% 0 0);
    transform: translate(50px, 0); }
  .p-interview-hl:before, .p-interview-hl:after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    border-top: 2px solid #1fddb9;
    border-bottom: 2px solid #268be8; }
  .p-interview-hl:before {
    left: 50%;
    background: linear-gradient(to bottom, #1fddb9, #268be8) 0 0/2px 100% no-repeat; }
  .p-interview-hl:after {
    right: 50%;
    background: linear-gradient(to bottom, #1fddb9, #268be8) 100% 0/2px 100% no-repeat; }

.p-interview-img {
  opacity: 0;
  transform: translate(0, 20px); }
  @media only screen and (max-width: 960px) {
    .p-interview-img {
      margin: 35px 0; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-img {
      margin: 70px 0; } }
  .p-interview-img img {
    width: 100%;
    transform: scale(1.2); }
  .p-interview-img figcaption {
    opacity: 0;
    transform: translate(0, 20px); }
    @media only screen and (max-width: 960px) {
      .p-interview-img figcaption {
        font-size: 10px;
        font-size: 0.625rem;
        margin-top: 10px; } }
    @media print, screen and (min-width: 961px) {
      .p-interview-img figcaption {
        font-size: 12px;
        font-size: 0.75rem;
        margin-top: 15px; } }
  .p-interview-img a {
    display: block;
    overflow: hidden; }
    @media print, screen and (min-width: 961px) {
      .p-interview-img a {
        transition: opacity .5s; }
        .p-interview-img a:hover {
          opacity: .8; }
          .p-interview-img a:hover img {
            transform: scale(1.05); } }

.p-interview-img-auto {
  text-align: center; }
  .p-interview-img-auto img {
    width: auto;
    max-width: 100%; }
  .p-interview-img-auto a {
    display: inline-block; }

@media only screen and (max-width: 960px) {
  .p-interview-item {
    margin-top: 35px; } }
@media print, screen and (min-width: 961px) {
  .p-interview-item {
    margin-top: 70px; } }
.p-interview-item > p, .p-interview-item ul {
  opacity: 0;
  transform: translate(0, 20px); }
  .p-interview-item > p:not(:first-child), .p-interview-item ul:not(:first-child) {
    margin-top: 1.5em; }
@media print, screen and (min-width: 961px) {
  .p-interview-item.col2 {
    display: flex;
    justify-content: space-between; } }

.p-interview-item-img {
  opacity: 0;
  transform: translate(0, 20px); }
  @media print, screen and (min-width: 961px) {
    .p-interview-item-img {
      flex: 0 0 calc((100% - 60px) / 2); } }
  @media only screen and (max-width: 960px) {
    .p-interview-item-img img {
      transform: scale(1.2); } }
  @media print, screen and (min-width: 961px) {
    .p-interview-item-img img {
      transition: .3s; } }
  @media only screen and (max-width: 960px) {
    .p-interview-item-img figcaption {
      font-size: 10px;
      font-size: 0.625rem;
      margin-top: 10px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-item-img figcaption {
      font-size: 12px;
      font-size: 0.75rem;
      margin-top: 15px; } }
  .p-interview-item-img a {
    display: block;
    overflow: hidden; }
    @media print, screen and (min-width: 961px) {
      .p-interview-item-img a {
        transition: opacity .5s; }
        .p-interview-item-img a:hover {
          opacity: .8; }
          .p-interview-item-img a:hover img {
            transform: scale(1.05); } }

@media only screen and (max-width: 960px) {
  .p-interview-item-body {
    margin-top: 35px; } }
@media print, screen and (min-width: 961px) {
  .p-interview-item-body {
    flex: 0 0 calc((100% - 60px) / 2); } }
.p-interview-item-body > p, .p-interview-item-body ul {
  opacity: 0;
  transform: translate(0, 20px); }
  .p-interview-item-body > p:not(:first-child), .p-interview-item-body ul:not(:first-child) {
    margin-top: 1.5em; }

.p-interview-item-hl {
  padding-left: 2.5em;
  position: relative;
  font-weight: bold;
  opacity: 0;
  transform: translate(-20px, 0); }
  @media only screen and (max-width: 960px) {
    .p-interview-item-hl {
      font-size: 18px;
      font-size: 1.125rem;
      margin-bottom: 15px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-item-hl {
      font-size: 20px;
      font-size: 1.25rem;
      margin-bottom: 30px; } }
  .p-interview-item-hl:before {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: currentcolor;
    position: absolute;
    left: 0;
    top: .8em; }

.p-interview-item-hl-sub {
  font-weight: bold;
  opacity: 0;
  transform: translate(0, 20px); }
  @media only screen and (max-width: 960px) {
    .p-interview-item-hl-sub {
      margin-top: 15px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-item-hl-sub {
      margin-top: 30px; } }

.p-interview-youtube {
  transform: translate(0, 30px);
  opacity: 0;
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  @media only screen and (max-width: 960px) {
    .p-interview-youtube {
      margin: 40px 0; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-youtube {
      margin: 60px 0; } }
  .p-interview-youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.p-interview-offer {
  opacity: 0;
  transform: translate(0, 20px); }
  @media only screen and (max-width: 960px) {
    .p-interview-offer {
      margin-top: 35px; } }
  @media print, screen and (min-width: 961px) {
    .p-interview-offer {
      margin-top: 70px; } }

.is-anime.p-interview-mv {
  transform: translate(0, 0);
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: 1s; }
  .is-anime.p-interview-mv img {
    width: 100%;
    transform: scale(1);
    transition: 1s; }
.is-anime.p-interview-hl {
  opacity: 1;
  transition: opacity 1s; }
  .is-anime.p-interview-hl span {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    transition: clip-path 1s .6s, transform 1s .3s; }
  .is-anime.p-interview-hl:before {
    left: 0;
    transition: left 1s; }
  .is-anime.p-interview-hl:after {
    right: 0;
    transition: right 1s; }
.is-anime.p-interview-img {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 1s, transform 1s; }
  .is-anime.p-interview-img img {
    transform: scale(1);
    transition: transform 1s; }
  .is-anime.p-interview-img figcaption {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 1s, transform 1s; }
.is-anime.p-interview-item .p-interview-item-hl {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity .5s, transform .5s; }
.is-anime.p-interview-item .p-interview-item-hl-sub {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity .5s, transform .5s; }
.is-anime.p-interview-item > p, .is-anime.p-interview-item ul {
  opacity: 1;
  transform: translate(0, 0);
  transition: .5s; }
.is-anime.p-interview-item .p-interview-item-img {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 1s, transform 1s; }
  @media only screen and (max-width: 960px) {
    .is-anime.p-interview-item .p-interview-item-img img {
      transform: scale(1);
      transition: transform 1s; } }
.is-anime .p-interview-item-body > p, .is-anime .p-interview-item-body ul {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 1s, transform 1s; }
.is-anime.p-interview-youtube {
  transform: translate(0, 0);
  opacity: 1;
  transition: opacity 1s, transform 1s; }
.is-anime.p-interview-offer {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 1s, transform 1s; }

@media print, screen and (min-width: 961px) {
  .p-entry-box {
    display: flex;
    justify-content: space-between;
    align-items: center; } }

@media print, screen and (min-width: 961px) {
  .p-entry-hl {
    margin-bottom: 0;
    flex: 0 0 33%;
    margin-right: 20px; } }

@media print, screen and (min-width: 961px) {
  .p-entry-list {
    flex: 1 0 auto;
    justify-content: flex-end; } }
@media print, screen and (min-width: 961px) {
  .p-entry-list li {
    flex: 0 0 calc((100% - 20px * 2) / 2); } }

.p-entry-btn {
  white-space: nowrap; }

.p-recommend {
  transform: translate(0, 20px);
  opacity: 0; }

@media print, screen and (min-width: 961px) {
  .p-recommend-inr {
    width: 100%;
    max-width: 1020px;
    padding: 0 30px;
    margin: 0 auto; } }

@media only screen and (max-width: 960px) {
  .p-recommend-hl {
    padding: 0 20px; } }

.is-anime.p-recommend {
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 1s, opacity 1s; }

/*# sourceMappingURL=interview.css.map */