@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
* {
  margin: 0;
  box-sizing: border-box;
}

.dir-under .wrap {
  position: relative;
  background: url(../images/main-under-bg.jpg) repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

.dir-under.archive2024 .wrap {
  position: relative;
  background: url(../images/main-under-bg02.png) repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

@media screen and (max-width: 768px) {
  .dir-under .wrap {
    background: url(../images/main-under-bg_sp.jpg) no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
  }

  .dir-under.archive2024 .wrap {
    background: url(../images/main-under-bg02_sp.png) repeat-y;
    background-size: 100% auto;
    background-position: top center;
  }
}

.dir-under .wrap::before {
  content: '';
  position: absolute;
  translate: -50% 0;
  top: 0;
  left: 50%;
  max-width: 1280px;
  width: 100%;
  height: 100%;
  background: url(../images/deco-under-bg.png) repeat-y;
  background-size: 100% auto;
}

#bl2024 .dir-under .wrap::before {
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .dir-under .wrap::before {
    background: url(../images/deco-under-bg_sp.png) repeat-y;
    background-size: 100% auto;
  }
}

.title-group .deco01 {
  position: absolute;
  top: 0;
  left: 340px;
  width: 85px;
}

@media (max-width: 768px) {
  .title-group .deco01 {
    top: 10px;
    left: initial;
    right: 0;
    width: 55px;
  }
}

.title-group .page-title {
  position: relative;
  font-size: clamp(5rem, calc(64/1280*100vw), 6.4rem);
  font-weight: 400;
  font-family: var(--rammetto);
  letter-spacing: 0.048em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  filter: drop-shadow(8px 8px 0 #55D6C2);
  padding-bottom: 8px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .title-group .page-title {
    text-align: center;
    font-size: 4rem;
    padding-bottom: 0;
  }
}

.title-group .page-title span {
  translate: 0 200%;
  display: inline-block;
}

.title-group .sub-title {
  position: relative;
  display: block;
  width: max-content;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--zenKakuAntique);
  text-align: center;
  line-height: 1;
  border: 2px solid #000;
  border-radius: 40px;
  padding: 11px 30px;
  margin: 0 0 20px;
  background-color: #fff;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .title-group .sub-title {
    margin: 0 auto 20px;
  }
}

.title-group .sub-title::before {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 0;
  left: 35px;
  width: 22px;
  height: 15px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #000;
}

.title-group .sub-title::after {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 1px;
  left: 38px;
  width: 18px;
  height: 12px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #fff;
}

#bl2024 {
  .announce,
  a.announce {
    background-color: #F49097;
    color: #fff;
  }
  
  .production,
  a.production {
    background-color: #F5E960;
    color: #231f20;
  }
  
  .media,
  a.media {
    background-color: #DFB2F4;
    color: #231f20;
  }
  
  .technology,
  a.technology {
    background-color: #577FFF;
    color: #fff;
  }
  
  .category-all,
  a.category-all {
    background-color: #fff;
  }
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ fv-area ↓↓↓ */
.fv-area {
  position: relative;
  max-width: calc(1080px + 70px * 2);
  margin: 0 auto;
}

.fv-area .inner {
  padding: 42px 70px 0;
}

@media screen and (max-width: 768px) {
  .fv-area .inner {
    padding: 37px 15px 0;
  }
}

.fv-area .title-group {
  position: relative;
  z-index: 1;
}

#detail {
  .fv-area .title-group .deco01 {
    position: absolute;
    top: 0;
    left: 32%;
    width: 132px;
  }
  
  @media screen and (max-width: 768px) {
    .fv-area .title-group .deco01 {
      top: initial;
      bottom: 0;
      left: 81%;
      width: 70px;
    }
  }
}
/* ↑↑↑ fv-area ↑↑↑ */

/* ↓↓↓ catch-area ↓↓↓ */
.catch-area {
  position: relative;
  max-width: calc(1080px + 70px * 2);
  margin: 35px auto 0;
}

@media (max-width: 768px) {
  .catch-area {
    margin: 24px auto 0;
  }
}

.catch-area .deco01 {
  position: absolute;
  transform: rotateY(180deg);
  bottom: 120px;
  left: -10px;
  width: 98px;
  z-index: 2;
}

@media (max-width: 768px) {
  .catch-area .deco01 {
    bottom: 80px;
    left: -5px;
    width: 60px;
  }
}

.catch-area .inner {
  position: relative;
  padding: 0 70px 60px;
  z-index: 1;
}

@media (max-width: 768px) {
  .catch-area .inner {
    padding: 0 32px 35px;
  }
}

.catch-area .image {
  border-radius: 100px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .catch-area .image {
    border-radius: 50px;
  }
}

.catch-area .catch-textgroup {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .catch-area .catch-textgroup {
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    margin-top: 24px;
  }
}

.catch-area .catch-text + .catch-text {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .catch-area .catch-text + .catch-text {
    margin-top: 40px;
  }
}

.catch-area .attention {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
  padding-left: 1em;
  text-indent: -1em;
}
/* ↑↑↑ catch-area ↑↑↑ */

/* ↓↓↓ category-area ↓↓↓ */
.category-area .inner {
  padding: 0 70px;
}

@media (max-width: 768px) {
  .category-area .inner {
    padding: 0 32px;
  }
}

.category-area .category-block {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1082px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .category-area .category-block {
    gap: 12px 10px;
    max-width: 500px;
  }
}

.category-area .category-btn {
  cursor: pointer;
  position: relative;
  width: calc((100% - 14px * 3) / 4);
  height: 68px;
  border: 2px solid #000;
  border-radius: 68px;
  text-align: center;
  display: grid;
  place-content: center;
  font-size: clamp(1.2rem, calc(16 / 1280* 100vw), 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  box-shadow: 6px 6px 0 #000;
  padding: 0 min(55px, calc(55 / 1280* 100vw)) 0 min(30px, calc(30 / 1280* 100vw));
  transition: box-shadow ease .3s, translate ease .3s;
}

@media screen and (min-width: 769px) {
  .category-area .category-btn:hover {
    box-shadow: 0 0 0 #000;
    translate: 6px 6px;
  }
}

@media (max-width: 1100px) {
  .category-area .category-btn {
    width: calc((100% - 14px * 2) / 3);
    font-size: clamp(1.2rem, calc(16 / 1280* 100vw), 1.6rem);
  }
}

@media (max-width: 768px) {
  .category-area .category-btn {
    width: calc((100% - 10px) / 2);
    height: 62px;
    font-size: 1.2rem;
    padding: 0 50px 0 3%;
  }
}

.category-area .category-btn .arrow {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 12px;
  width: min(40px, calc(40 / 1280* 100vw));
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background-color: #F5E960;
  border: 1px solid #000;
  overflow: clip;
}

@media (max-width: 768px) {
  .category-area .category-btn .arrow {
    right: 10px;
    width: 38px;
  }
}

.category-area .category-all .arrow {
  background-color: #fff;
}

.category-area .category-btn .arrow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  translate: -50% -50%;
  scale: 0;
  top: 50%;
  left: 50%;
  z-index: 0;
  transition: scale ease .3s;
}

@media (min-width: 769px) {
  .category-area .category-btn:hover .arrow::before {
    scale: 1;
  }
}

.category-area .category-btn .arrow img {
  position: relative;
  width: 5px;
  height: 8px;
  z-index: 1;
}

.category-area .category-all .arrow img {
  width: 6px;
  height: 6px;
}
/* ↑↑↑ category-area ↑↑↑ */

/* ↓↓↓ link-area ↓↓↓ */
.link-area  {
  margin-top: 80px
}

@media (max-width: 768px) {
  .link-area  {
    margin-top: 64px
  }
}

.link-area .inner {
  padding: 0 70px;
}

@media (max-width: 768px) {
  .link-area .inner {
    padding: 0 32px;
  }
}

.link-area .link-block {
  position: relative;
  max-width: 1082px;
  margin: 0 auto;
  container-type: inline-size;
}

.link-area .link-block .deco01 {
  position: absolute;
  top: 235px;
  right: 20px;
  width: 154px;
}

.link-area .link-block .deco02 {
  position: absolute;
  translate: -50% 0;
  bottom: -30px;
  left: 50%;
  width: 358px;
}

.link-area .link-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
  z-index: 1;
}

.link-area .link-box + .link-box {
  margin-top: 20px;
}

@container (max-width: 1080px) {
  .link-area .link-box {
    max-width: 806px;
    margin: 0 auto;
  }

  .link-area .link-block .deco01 {
    top: -74px;
    width: 75px;
    right: 130px;
  }
}

@container (max-width: 806px) {
  .link-area .link-box {
    max-width: 532px;
  }
}

@media (max-width: 768px) {
  .link-area .link-box {
    max-width: 638px;
  }

  @container (max-width: 638px) {
    .link-area .link-box {
      max-width: 311px;
    }
  }

  .link-area .link-block .deco01 {
    right: 15px;
  }
}

.link-area .page-btn {
  display: block;
  width: 258px;
  border-radius: 32px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
  transition: box-shadow ease .3s, translate ease .3s;
}

@media (max-width: 768px) {
  .link-area .page-btn {
    display: flex;
    align-items: center;
    width: min(311px, 100%);
    min-height: 150px;
    border-radius: 24px;
  }

  .link-area .page-btn .image {
    min-width: 126px;
    width: 126px;
    height: 100%;
  }

  .link-area .page-btn .image img {
    object-fit: cover;
    height: 100%;
  }
}

@media (min-width: 769px) {
  .link-area .page-btn:hover {
    box-shadow: 0 0 0 #000;
    translate: 6px 6px !important;
  }
}

.link-area .page-btn .text-group {
  padding: 16px 20px 22px;
}

@media (max-width: 768px) {
  .link-area .page-btn .text-group {
    height: max-content;
    padding: 20px 10px;
  }
}

.link-area .page-btn .category {
  width: max-content;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 25px;
  padding: 4px 8px;
  color: #000;
  background-color: #fff;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .link-area .page-btn .category {
    font-size: 1.2rem;
    letter-spacing: 0;
    margin-bottom: 5px;
  }
}

.link-area .page-btn p {
  font-family: var(--zenKakuAntique);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .link-area .page-btn p {
    font-size: 1.2rem;
  }

  .link-area .page-btn .category + .position {
    margin-top: 12px;
  }
}

.link-area .page-btn .title {
  font-size: 1.9rem;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .link-area .page-btn .title {
    margin-top: 0;
  }
}

.link-area .page-btn .joined {
  margin-top: 22px;
}

.link-area .page-btn .position + .joined {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .link-area .page-btn .joined {
    margin-top: 5px;
  }

  .link-area .page-btn .position + .joined {
    margin-top: 10px;
  }
}

.link-area .archive-block {
  display: flex;
  column-gap: 24px;
  max-width: 1080px;
  margin: 112px auto;
}

@media (max-width: 768px) {
  .link-area .archive-block {
    flex-direction: column;
    row-gap: 32px;
    width: 100%;
    margin-top: 64px;
  }
}

.link-area .archive-btn {
  position: relative;
  display: block;
  width: calc((100% - 24px) / 2);
  margin: 0 auto;
  border: 4px solid #000;
  border-radius: 32px;
  box-shadow: 6px 6px 0 #000;
  overflow: hidden;
}

@media (min-width: 769px) {
  .link-area .archive-btn:hover {
    box-shadow: 0 0 0 #000;
    translate: 6px 6px;
  }
}

@media (max-width: 768px) {
  .link-area .archive-btn {
    width: 100%;
    max-width: 500px;
    border: 2px solid #000;
    border-radius: 24px;
  }
}

.link-area .archive-btn .title-group {
  position: absolute;
  text-align: center;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: max-content;
  width: 100%;
}

.link-area .archive-btn .title-group .page-title {
  font-size: clamp(3.6rem, calc(64/1280*100vw), 6.4rem);
  filter: initial;
}

.link-area .archive-btn .title-group .jp {
  font-family: var(--zenKakuAntique);
  font-size: clamp(1.4rem, calc(24/1280*100vw), 2.4rem);
  font-weight: 700;
  color: #fff;
}

.link-area .archive-btn .arrow {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F5E960;
}

@media (max-width: 768px) {
  .link-area .archive-btn .arrow {
    bottom: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }
}

.link-area .archive-btn .arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  scale: 0;
  transition: scale ease .3s;
}

@media (min-width: 769px) {
  .link-area .archive-btn:hover .arrow::before {
    scale: 1;
  }
}

.link-area .archive-btn .arrow img {
  position: relative;
  width: 12px;
  height: 7px;
  z-index: 1;
}
/* ↑↑↑ link-area ↑↑↑ */

/* ↓↓↓ #detail ↓↓↓ */
/* ↓↓↓ intro-area ↓↓↓ */
#detail {
  .intro-area .inner {
    padding: 0 70px;
  }

  @media (max-width: 768px) {
    .intro-area .inner {
      padding: 0 32px;
    }
  }

  .intro-area .intro-block {
    display: flex;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    gap: 32px;
    container-type: inline-size;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block {
      flex-direction: column-reverse;
      gap: 0;
      padding-top: 90px;
    }
  }

  .intro-area .intro-block .image {
    max-width: 618px;
    overflow: hidden;
    border-radius: 9.2593cqw;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .image {
      max-width: 640px;
      border-radius: 32px;
      margin: 0 auto;
    }
  }

  .intro-area .intro-block .text-group {
    position: relative;
    min-width: max(360px, 38.705cqw);
    z-index: 1;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .text-group {
      min-width: initial;
      width: 100%;
    }

    .intro-area .intro-block .info-wrap {
      position: absolute;
      translate: 0 -100%;
      top: calc(-64.5334vw - 20px);
      left: 0;
      display: flex;
      flex-direction: column-reverse;
    }
  }

  .intro-area .voice-title {
    font-size: clamp(3.6rem, calc(40/1280*100vw), 4rem);
    font-weight: 900;
    margin-bottom: 14px;
  }

  @media (max-width: 768px) {
    .intro-area .voice-title {
      font-size: 2.2rem;
      margin-bottom: 0;
    }
  }
  
  .intro-area .date {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .intro-area .date .bar {
    display: block;
    flex-grow: 1;
    height: 1px;
    background-color: #231F20;
    margin-right: 11px;
  }

  @media (max-width: 768px) {
    .intro-area .date {
      font-size: 1.4rem;
    }
    
    .intro-area .date .bar {
      display: none;
    }
  }

  .intro-area .profile-box {
    position: relative;
    border-radius: 32px;
    border: 2px solid #000;
    margin-top: 20px;
    padding: 10.53% 8.613% 5.984%;
  }

  @media (max-width: 768px) {
    .intro-area .profile-box {
      padding: 30px 30px 16px;
    }
  }

  .intro-area .profile-box .lead {
    position: absolute;
    top: 5px;
    left: 88px;
    font-family: var(--rammetto);
    font-size: clamp(4rem, calc(52/1280*100vw), 5.2rem);
    letter-spacing: 0.048em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    opacity: 0.8;
  }

  @media (max-width: 768px) {
    .intro-area .profile-box .lead {
      top: 5px;
      left: 65px;
      -webkit-text-stroke: 1px #fff;
      font-size: 3.8rem;
    }
  }

  .intro-area .profile-box .category {
    position: relative;
    display: grid;
    place-content: center;
    width: max-content;
    height: 37px;
    font-family: var(--zenKakuAntique);
    font-size: clamp(1.4rem, calc(20/1280*100vw), 2rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 37px;
    padding: 0 18px;
    color: #231F20;
    border: 1px solid #231F20;
    background-color: #fff;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .intro-area .profile-box .category {
      height: 25px;
      font-size: 1.2rem;
    }
  }

  .intro-area .profile-box .position {
    font-size: clamp(1.2rem, calc(18/1280*100vw), 1.8rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 22px;
  }

  @media (max-width: 768px) {
    .intro-area .profile-box .position {
      margin-top: 10px;
    }
  }
  
  .intro-area .profile-box .name {
    font-size: clamp(2rem, calc(32/1280*100vw), 3.2rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }
    
  .intro-area .profile-box .name .en {
    display: inline-block;
    font-family: var(--montserrat);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: 22px;
  }

  @media (max-width: 768px) {
    .intro-area .profile-box .name .en {
      font-size: 1.2rem;
      margin-left: 12px;
    }
  }
}

/* ↑↑↑ intro-area ↑↑↑ */

/* ↓↓↓ interview-area ↓↓↓ */
#detail {
  .interview-area .inner {
    padding: 0 70px;
  }

  @media (max-width: 768px) {
    .interview-area .inner {
      padding: 0 32px;
    }
  }

  .interview-area .school-block {
    position: relative;
    max-width: 1080px;
    margin: 76px auto 100px;
    border-radius: 55px;
    padding: 50px 50px 75px;
    background-color: #55D6C2;
  }

  @media (max-width: 768px) {
    .interview-area .school-block {
      margin: 28px auto 54px;
      border-radius: 24px;
      padding: 30px 0 46px;
    }
  }

  .interview-area .school-block .deco01 {
    position: absolute;
    top: -80px;
    left: 40px;
    width: 78px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .deco01 {
      top: -25px;
      left: 10px;
      width: 44px;
    }
  }

  .interview-area .school-block .deco02 {
    position: absolute;
    top: 25%;
    right: -55px;
    width: 100px;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .deco02 {
      top: 12%;
      right: -24px;
      width: 40px;
    }
  }
  
  .interview-area .school-block .deco03 {
    position: absolute;
    transform: rotateY(180deg);
    top: 60%;
    right: -70px;
    width: 112px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .deco03 {
      top: 68%;
      right: -40px;
      width: 60px;
    }
  }

  .interview-area .school-box {
    position: relative;
    max-width: 916px;
    margin: 0 auto;
    z-index: 1;
  }

  .interview-area .interview-block {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    z-index: 1;
  }

  .interview-area .interview-block:first-of-type {
    margin-top: 150px;
  }

  @media (max-width: 768px) {
    .interview-area .interview-block:first-of-type {
      margin-top: 60px;
    }
  }
  
  .interview-area .interview-block .deco04 {
    position: absolute;
    top: -50px;
    left: 600px;
    width: 84px;
  }

  @media (max-width: 768px) {
    .interview-area .interview-block .deco04 {
      top: -85px;
      left: initial;
      right: 20px;
      width: 45px;
    }
  }
    
  .interview-area .interview-block .deco05 {
    position: absolute;
    transform: rotateY(180deg);
    top: -185px;
    right: -80px;
    width: 98px;
  }

  @media (max-width: 768px) {
    .interview-area .interview-block .deco05 {
      top: -240px;
      right: -55px;
      width: 50px;
    }
  }

  .interview-area .interview-box + .interview-box {
    margin-top: 120px;
  }

  @media (max-width: 768px) {
    .interview-area .interview-box + .interview-box {
      margin-top: 60px;
    }
  }

  .interview-area .theme-group {
    position: relative;
    margin-bottom: 40px;
  }

  .interview-area .theme {
    position: relative;
    display: block;
    max-width: max-content;
    font-size: 2.8rem;
    font-weight: 700;
    font-family: var(--zenKakuAntique);
    border: 2px solid #000;
    border-radius: 40px;
    padding: 16px 37px;
    background-color: #55D6C2;
  }

  @media (max-width: 768px) {
    .interview-area .theme {
      font-size: 1.6rem;
      letter-spacing: 0;
      border-radius: 24px;
      padding: 12px 16px;
    }
  }

  .interview-area .theme::before {
    content: '';
    position: absolute;
    translate: 0 100%;
    bottom: 0;
    left: 25px;
    width: 22px;
    height: 15px;
    clip-path: polygon(20% 0, 0% 100%, 100% 0);
    background-color: #000;
}

  .interview-area .theme::after {
    content: '';
    position: absolute;
    translate: 0 100%;
    bottom: 1px;
    left: 28px;
    width: 18px;
    height: 12px;
    clip-path: polygon(20% 0, 0% 100%, 100% 0);
    background-color: #55D6C2;
  }

  @media (max-width: 768px) {
    .interview-area .theme::before {
      left: 10px;
      width: 19px;
      height: 12px;
  }
  
    .interview-area .theme::after {
      left: 13px;
      width: 15px;
      height: 9px;
    }
  }

  .interview-area .theme-group .num {
    position: absolute;
    translate: 0 -100%;
    top: 11px;
    left: 0;
    font-size: clamp(5rem, calc(64 / 1280* 100vw), 6.4rem);
    font-weight: 400;
    font-family: var(--rammetto);
    letter-spacing: 0.048em;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    filter: drop-shadow(8px 8px 0 #55D6C2);
  }

  @media (max-width: 768px) {
    .interview-area .theme-group .num {
      top: 6px;
      left: 0;
      font-size: 3.6rem;
      filter: drop-shadow(4px 4px 0 #55D6C2);
    }
  }

  .interview-area .answer-group {
    position: relative;
    display: flex;
    gap: 30px;
    border: 2px solid #231F20;
    border-radius: 55px;
    background-color: #fff;
    padding: 50px 50px 50px 42px;
  }

  @media (max-width: 768px) {
    .interview-area .answer-group {
      display: block;
      border-radius: 24px;
      padding: 44px 24px 30px;
    }
  }

  .interview-area .answer-group .deco01 {
    position: absolute;
    top: -63px;
    right: 5px;
    width: 63px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .interview-area .answer-group .deco01 {
      top: -32px;
      width: 35px;
    }
  }
  
  .interview-area .answer-group .deco02 {
    position: absolute;
    transform: rotateY(180deg);
    top: -63px;
    right: -46px;
    width: 120px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .interview-area .answer-group .deco02 {
      top: -32px;
      width: 80px;
    }
  }

  .interview-area .answer-group .deco03 {
    position: absolute;
    top: -118px;
    left: 490px;
    width: 120px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .interview-area .answer-group .deco03 {
      top: -18px;
      left: initial;
      right: 20px;
      width: 58px;
    }
  }

  .interview-area .answer-group .answer {
    font-size: clamp(5rem, calc(64 / 1280* 100vw), 6.4rem);
    font-weight: 400;
    font-family: var(--rammetto);
    letter-spacing: 0.048em;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    filter: drop-shadow(8px 8px 0 #55D6C2);
  }

  @media (max-width: 768px) {
    .interview-area .answer-group .answer {
      position: absolute;
      top: -10px;
      left: 24px;
      font-size: 3.7rem;
      filter: drop-shadow(4px 4px 0 #55D6C2);
    }
  }

  .interview-area .answer-group .text-wrap {
    max-width: 856px;
  }

  .interview-area .school-block .text,
  .interview-area .answer-group .text {
    text-align: justify;
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 500;
  }

  .interview-area .comment {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .text,
    .interview-area .answer-group .text,
    .interview-area .comment {
      font-size: 1.4rem;
    }
  }

  .interview-area .answer-group::before {
    content: '';
    position: absolute;
    translate: 0 100%;
    bottom: 0;
    right: 62px;
    width: 37px;
    height: 20px;
    clip-path: polygon(100% 100%, 0 0, 90% 0);
    background-color: #000;
  }
  
  .interview-area .answer-group::after {
    content: '';
    position: absolute;
    translate: 0 100%;
    bottom: 1px;
    right: 64px;
    width: 34px;
    height: 18px;
    clip-path: polygon(100% 100%, 0 0, 90% 0);
    background-color: #fff;
  }

  @media (max-width: 768px) {
    .interview-area .answer-group::before {
      right: 18px;
      width: 32px;
      height: 15px;
    }
    
    .interview-area .answer-group::after {
      right: 20px;
      width: 29px;
      height: 13px;
    }
  }

.interview-area .school-block .image,
.interview-area .answer-group .image {
  max-width: 701px;
  margin: 0 auto;
}

.interview-area .school-block p + .image,
.interview-area .answer-group p + .image,
.interview-area .school-block .image + .image,
.interview-area .answer-group .image + .image,
.interview-area .school-block .image + .comment,
.interview-area .answer-group .image + .comment,
.interview-area .school-block .comment + p,
.interview-area .answer-group .comment + p {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .interview-area .school-block .image + .comment,
  .interview-area .answer-group .image + .comment {
    margin-top: 15px;
  }
}

.interview-area .answer-group .credit {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 14px 0 24px;
}

@media (max-width: 768px) {
  .interview-area .answer-group .credit {
    font-size: 1.1rem;
    letter-spacing: 0;
    margin: 6px 0 18px;
  }
}

.interview-area .back-btn {
  position: relative;
  display: grid;
  place-content: center;
  width: 250px;
  height: 64px;
  margin: 55px auto 0;
  border-radius: 64px;
  padding: 0 64px 0 20px;
  border: 2px solid #000;
  background-color: #fff;
  box-shadow: 6px 6px 0 #000;
  transition: box-shadow ease .3s, translate ease .3s;
  z-index: 1;
}

@media (min-width: 769px) {
  .interview-area .back-btn:hover {
    box-shadow: 0 0 0 #000;
    translate: 6px 6px;
  }
}

@media (max-width: 768px) {
  .interview-area .back-btn {
    width: 263px;
  }
}

.interview-area .back-btn .link-txt {
  text-align: center;
  font-family: var(--zenKakuAntique);
  font-size: 1.4rem;
  font-weight: 700;
}

.interview-area .back-btn .arrow {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F5E960;
}

.interview-area .back-btn .arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  scale: 0;
  transition: scale ease .3s;
}

@media (min-width: 769px) {
    .interview-area .back-btn:hover .arrow::before {
      scale: 1;
    }
}

  .interview-area .back-btn .arrow img {
    position: relative;
    width: 12px;
    height: 7px;
    z-index: 1;
  }

  .interview-area .school-block .title-group {
    position: relative;
  }

  .interview-area .school-block .page-title {
    text-align: center;
    font-size: clamp(5rem, calc(96 / 1280* 100vw), 9.6rem);
    color: #55D6C2;
    -webkit-text-stroke: 2px #fff;
    filter: initial;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .page-title {
      font-size: 3.4rem;
      -webkit-text-stroke: 1px #fff;
    }
  }

  .interview-area .school-block .sub-title {
    position: absolute;
    translate: -50% 0;
    bottom: -5px;
    left: 50%;
    font-size: clamp(1.4rem, calc(20 / 1280* 100vw), 2rem);
    padding: 14px 40px;
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .sub-title {
      bottom: -30px;
      padding: 12px 32px;
    }
  }

  .interview-area .school-block .school-group {
    margin-top: 50px;
  }

  @media (max-width: 768px) {
    .interview-area .school-block .school-group {
      padding: 0 24px;
    }
  }
}

/* ↑↑↑ interview-area ↑↑↑ */
/* ↑↑↑ #detail ↑↑↑ */