@charset "UTF-8";
/* Scss Document */
/******************************************************/
body {
  padding: 240px 0 0; }

/******************************************************/
.interview_top {
  width: calc(100% - 200px);
  margin: 0 auto 90px;
  max-width: 1280px; }
  .interview_top h2 {
    font: 2.1rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #FCC800;
    letter-spacing: 0.05em;
    margin: 0 0 30px;
    position: relative;
    width: fit-content; }
    .interview_top h2:before {
      display: block;
      background: url("../images/voice/voice.svg") center center no-repeat;
      background-size: contain;
      width: 151px;
      height: 101px;
      position: absolute;
      content: "";
      right: -110px;
      top: -90px;
      transform-origin: center bottom;
      animation: yurayura 2s linear infinite; }
    .interview_top h2 span {
      color: #113479;
      padding: 0 0 0 10px; }
  .interview_top p {
    font: 4.4rem/1.6em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 0 40px; }
  .interview_top dl {
    margin: 0 0 80px; }
  .interview_top dt {
    font: 1.3rem/1.6em 'Noto Sans JP', sans-serif;
    font-weight: 400;
    margin: 0 0 5px; }
  .interview_top dd {
    font: 2.2rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 500; }
    .interview_top dd small {
      font: 1.3rem/1.6em 'Noto Sans JP', sans-serif;
      font-weight: 400;
      margin: 0 0 0 10px; }

@keyframes yurayura {
  0% , 100% {
    transform: rotate(5deg); }
  50% {
    transform: rotate(-5deg); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .interview_top {
    width: calc(100% - 40px);
    margin: 0 auto 90px;
    max-width: 768px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .interview_top {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 768px; }
    .interview_top h2 {
      font: 2.0rem/1.0em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      color: #FCC800;
      letter-spacing: 0.05em;
      margin: 0 0 20px; }
      .interview_top h2:before {
        width: 120px;
        height: 75px;
        right: -90px;
        top: -70px; }
    .interview_top p {
      font: 3rem/1.6em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      margin: 0 0 25px; }
    .interview_top dl {
      margin: 0 0 50px; }
    .interview_top dt {
      font: 1.3rem/1.6em 'Noto Sans JP', sans-serif;
      font-weight: 400;
      margin: 0 0 5px; }
    .interview_top dd {
      font: 2.2rem/1.0em 'Noto Sans JP', sans-serif;
      font-weight: 500; }
      .interview_top dd small {
        font: 1.3rem/1.6em 'Noto Sans JP', sans-serif;
        font-weight: 400;
        margin: 0 0 0 10px; } }
/*max-width:768px*/
/*max-width:480px*/
/******************************************************/
.voice_all {
  width: calc(100% - 200px);
  margin: 0 auto 200px;
  max-width: 1280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .voice_all {
    width: calc(100% - 40px);
    margin: 0 auto 150px;
    max-width: 768px;
    display: block; } }
/*max-width:1024px*/
/*max-width:768px*/
/*max-width:480px*/
/******************************************************/
.pic_voice {
  width: calc(100% - 640px);
  max-width: 640px;
  position: relative;
  right: -50px; }
  .pic_voice .pic_voice_item {
    position: sticky;
    top: 60px;
    width: 100%; }
    .pic_voice .pic_voice_item img {
      width: 100%;
      height: auto;
      aspect-ratio: 32/42; }

@media (max-width: 1280px) {
  .pic_voice {
    width: calc(100% - 580px); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .pic_voice {
    width: 100%;
    max-width: 480px;
    position: relative;
    right: auto;
    margin: 0 auto; }
    .pic_voice .pic_voice_item {
      position: relative;
      top: 0;
      width: 100%; }
      .pic_voice .pic_voice_item img {
        width: 100%;
        height: auto;
        aspect-ratio: 32/42; } }
/*max-width:1024px*/
/*max-width:768px*/
/*max-width:480px*/
/******************************************************/
.interview_txt {
  counter-reset: hoge; }
  .interview_txt div {
    margin: 0 0 90px;
    max-width: 620px; }
    .interview_txt div:last-of-type {
      margin: 0; }
  .interview_txt h3 {
    position: relative;
    min-height: 12rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    font: 2.2rem/1.6em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 0 10px; }
    .interview_txt h3:before {
      color: #fee391;
      z-index: -1;
      position: absolute;
      counter-increment: hoge;
      content: "0" counter(hoge);
      left: 0;
      font: 12rem/1.0em  'Oswald', sans-serif; }
  .interview_txt p {
    font: 1.6rem/2.0em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph; }

@media (max-width: 1280px) {
  .interview_txt div {
    max-width: 580px; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .interview_txt {
    counter-reset: hoge; }
    .interview_txt div {
      margin: 0 auto 60px !important;
      max-width: 768px; }
    .interview_txt h3 {
      position: relative;
      min-height: 12rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: center;
      justify-content: center;
      align-items: flex-start;
      z-index: 1;
      font: 2.2rem/1.6em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      margin: 0 0 10px; }
      .interview_txt h3:before {
        color: #fee391;
        z-index: -1;
        position: absolute;
        counter-increment: hoge;
        content: "0" counter(hoge);
        left: 0;
        font: 12rem/1.0em  'Oswald', sans-serif; }
    .interview_txt p {
      font: 1.6rem/2.0em 'Noto Sans JP', sans-serif;
      font-weight: 500;
      text-align: justify;
      text-justify: inter-ideograph; } }
/*max-width:1024px*/
/*max-width:768px*/
/*max-width:480px*/
/******************************************************/
.about_member {
  width: calc(100% - 200px);
  margin: 0 auto 280px;
  max-width: 820px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative; }
  .about_member img {
    width: 330px;
    display: block;
    margin: 0 20px 0 0; }
  .about_member > p {
    background-color: #00B1ED;
    color: #fff;
    width: fit-content;
    border-radius: 50px;
    padding: 10px 30px 12px;
    font: 2.0rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    position: absolute;
    right: 30px;
    bottom: -20px; }
    .about_member > p small {
      padding: 0 0 0 15px;
      font: 1.5rem/1.0em 'Noto Sans JP', sans-serif;
      font-weight: 500; }
  .about_member dl {
    max-width: 820px;
    border: 3px solid #00B1ED;
    border-radius: 10px;
    padding: 50px 30px 40px;
    margin: 0 0 0 auto; }
  .about_member dt {
    color: #00B1ED;
    font: 2.4rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    position: relative; }
    .about_member dt:before {
      display: block;
      position: absolute;
      content: "";
      width: 89px;
      height: 89px;
      left: 60px;
      top: -100px; }
    .about_member dt.buka:before {
      background: url("../images/voice/about_buka.svg") center center no-repeat;
      background-size: contain; }
    .about_member dt.senpai:before {
      background: url("../images/voice/about_senpai.svg") center center no-repeat;
      background-size: contain; }
    .about_member dt.douryo:before {
      background: url("../images/voice/about_douryo.svg") center center no-repeat;
      background-size: contain; }
    .about_member dt.kouhai:before {
      background: url("../images/voice/about_kouhai.svg") center center no-repeat;
      background-size: contain; }
  .about_member dd {
    font: 1.6rem/1.8em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph; }

@media (max-width: 1280px) {
  .about_member {
    width: calc(100% - 120px); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .about_member {
    width: calc(100% - 40px);
    margin: 0 auto 280px;
    max-width: 768px; }
    .about_member dl {
      margin: 0 auto; }
    .about_member dt:before {
      left: 30px;
      top: -100px; } }
/*max-width:1024px*/
/*max-width:768px*/
@media (max-width: 480px) {
  .about_member > p {
    width: 70vw;
    text-align: center;
    border-radius: 10px;
    padding: 10px 30px 12px;
    font: 2.0rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    position: absolute;
    top: auto;
    left: 50%;
    bottom: -28px;
    right: auto;
    -webkit-transform: translate(-50%, 0%);
    /* Safari用 */
    transform: translate(-50%, 0%); }
    .about_member > p small {
      display: block;
      padding: 10px 0 0;
      font: 1.5rem/1.0em 'Noto Sans JP', sans-serif;
      font-weight: 500; }
  .about_member dl {
    padding: 50px 30px 60px; }
  .about_member dt {
    font: 2.0rem/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 0 15px; }
    .about_member dt:before {
      width: 95px;
      height: 95px;
      left: 20px;
      top: -110px; }
  .about_member dd {
    font: 1.5rem/1.8em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph; } }
/*max-width:480px*/
/******************************************************/
/******************************************************/
.pic {
  width: calc(100% - 640px);
  max-width: 640px;
  position: relative;
  right: -50px; }
  .pic .voice_pic {
    position: sticky;
    top: 0;
    height: 840px; }
    .pic .voice_pic div {
      width: 100%;
      height: auto;
      aspect-ratio: 32/42;
      position: absolute;
      top: 0;
      left: 0;
      transition: 1s; }
    .pic .voice_pic .voice01 {
      background-color: red;
      z-index: 3; }
    .pic .voice_pic .voice02 {
      background-color: blue;
      z-index: 2;
      opacity: 0; }
    .pic .voice_pic .voice03 {
      background-color: green;
      z-index: 1;
      opacity: 0; }

.voice_pic.transform .voice01 {
  background-color: red; }
.voice_pic.transform .voice02 {
  background-color: blue;
  z-index: 2;
  opacity: 1; }
.voice_pic.transform .voice03 {
  background-color: green;
  z-index: 1;
  opacity: 0; }

.voice_pic.transform02 .voice01 {
  background-color: red;
  z-index: 0; }
.voice_pic.transform02 .voice02 {
  background-color: blue;
  z-index: 2;
  opacity: 0; }
.voice_pic.transform02 .voice03 {
  background-color: green;
  z-index: 1;
  opacity: 1; }

.voice {
  max-width: 100%; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .pic {
    width: 100%;
    max-width: 100%;
    position: relative;
    right: auto; }
    .pic .voice_pic {
      position: relative;
      top: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start; }
      .pic .voice_pic div {
        width: calc(100%/3);
        height: auto;
        padding: 50% 0 0;
        position: relative;
        top: auto;
        left: auto;
        transition: 1s;
        opacity: 1 !important; }
      .pic .voice_pic .voice01 {
        background-color: red;
        z-index: 3; }
      .pic .voice_pic .voice02 {
        background-color: blue;
        z-index: 2;
        opacity: 0; }
      .pic .voice_pic .voice03 {
        background-color: green;
        z-index: 1;
        opacity: 0; }

  .voice_pic.transform .voice01 {
    background-color: red;
    z-index: 3;
    opacity: 0; }
  .voice_pic.transform .voice02 {
    background-color: blue;
    z-index: 2;
    opacity: 1; }
  .voice_pic.transform .voice03 {
    background-color: green;
    z-index: 1;
    opacity: 0; }

  .voice_pic.transform02 .voice01 {
    background-color: red;
    z-index: 0; }
  .voice_pic.transform02 .voice02 {
    background-color: blue;
    z-index: 2;
    opacity: 0; }
  .voice_pic.transform02 .voice03 {
    background-color: green;
    z-index: 1;
    opacity: 1; }

  .voice {
    max-width: 100%; } }
/*max-width:1024px*/
/*max-width:768px*/
/*max-width:480px*/