@charset "utf-8";

.hero-voice {
  background-image: linear-gradient(135deg, #000, #a62b17);
  display: grid;
  grid-template-columns: 64.58333vw 1fr;
}

.hero-voice__body {
  align-items: flex-end;
  display: flex;
  padding: 4.167vw 3.125vw 3.125vw 16.667vw;
}

.hero-voice__tag {
  border-left: .10416vw solid;
  color: #fff;
  font-size: 2.2rem;
  letter-spacing: .05em;
  margin-bottom: 2.083vw;
  padding-left: 0.781vw;
}

.hero-voice__title {
  font-size: 4rem;
  letter-spacing: .05em;
  line-height: 2;
  margin-bottom: 1.042vw;
}

.hero-voice__title-item {
  color: var(--body-color);
  padding: 0.208vw 0.781vw 0.417vw;
  background: linear-gradient(rgba(255,255,255,0) 0%, #fff 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-voice__sub-title {
  font-size: 2.8rem;
  letter-spacing: .05em;
  line-height: 2;
  margin-bottom: 3.125vw;
}

.hero-voice__sub-title-item {
  color: #fff;
  padding: 0.208vw 0.781vw 0.417vw;
  background: linear-gradient(rgba(255,255,255,0) 0%, #000 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-voice__info {
  color: #fff;
  font-size: 2rem;
}

.hero-voice__img {
  height: 100%;
  object-fit: cover;
}

.voice-contents {
  display: grid;
  gap: 5.208vw;
  padding: 5.208vw 23.958vw;
}

.voice-content.-outline {
  margin-top: -7.292vw;
  padding-top: 7.292vw;
}

.voice-content__headline {
  font-size: 3.6rem;
  letter-spacing: .05em;
  line-height: 1.4;
  margin-bottom: 3.125vw;
  text-align: center;
}

.voice-content__headline::before {
  background-color: var(--body-color);
  content: "";
  display: block;
  height: 0.208vw;
  margin: 0 auto 1.25vw;
  width: 4.167vw;
}

.voice-content__text {
  font-size: 2.2rem;
  line-height: 2;
  margin-bottom: 3em;
}

.voice-content__figure {
  margin: 0;
}

.voice-content__figcaption {
  color: var(--gray);
  font-size: 2rem;
  line-height: 1.6;
  margin-top: 1em;
  text-align: center;
}

.voice-content__history-title {
  background-color: #000;
  color: #fff;
  font-size: 3.2rem;
  letter-spacing: .05em;
  line-height: 1.4;
  margin-bottom: 2.083vw;
  padding: 1.354vw 1.042vw 1.51vw;
  position: relative;
  text-align: center;
}

.voice-content__history-title::before,
.voice-content__history-title::after {
  content: "";
  aspect-ratio: 1;
  background-color: var(--color-key);
  width: 2.083vw;
  position: absolute;
}

.voice-content__history-title::before {
  clip-path: polygon(0 0,100% 0,0 100%);
  left: 0;
  top: 0;
}

.voice-content__history-title::after {
  clip-path: polygon(0 100%,100% 0,100% 100%);
  bottom: 0;
  right: 0;
}

.voice-content__history:not(:last-child)::after {
  background-color: var(--border-color);
  content: "";
  display: block;
  height: 1.563vw;
  width: 5.208vw;
  margin: 0 auto .52083vw;
  aspect-ratio: 2;
  clip-path: polygon(50% 100%,100% 0,0 0);
}

.voice-content__history-inner {
  background-color: #fff;
  font-size: 2.4rem;
  padding: 1.667vw 1.563vw 1.823vw;
  text-align: center;
}

.-history-b .voice-content__history-inner {
  border: 1px solid var(--color-key);
  font-weight: var(--font-weight-bold);
}

.-history-c .voice-content__history-inner {
  background-color: var(--color-key-vlt);
  border: 1px solid var(--color-key);
  font-weight: var(--font-weight-bold);
}

.-history-d .voice-content__history-inner {
  background-color: var(--color-key);
  color: #fff;
  font-weight: var(--font-weight-bold);
}

.outline {
  background-color: var(--gray-vlt);
  padding: 2.083vw;
}

.outline__title {
  align-items: center;
  display: flex;
  font-size: 3.2rem;
  font-weight: var(--font-weight-black);
  gap: 1.25vw;
  justify-content: center;
  line-height: 1;
  margin-bottom: 1em;
}

.outline__title::before,
.outline__title::after {
  background-color: var(--body-color);
  content: "";
  height: 0.104vw;
  width: 2.083vw;
}

.outline__box {
  background-color: #fff;
  padding: 1.563vw;
}

.outline__list {
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.outline__list:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: .9em;
  padding-bottom: .9em;
}

.outline__item {
  color: var(--body-color);
  align-items: baseline;
  display: grid;
  grid-template-columns: 1em 1fr;
  padding-left: .5em;
}

.outline__item::before {
  border-radius: 50%;
  border: .10416vw solid var(--color-key);
  content: "";
  height: 0.625vw;
  transform: translateY(-.10416vw);
  width: 0.625vw;
}

.voice-chat {
  font-size: 2.2rem;
  line-height: 2;
  padding: 2.083vw 1.563vw;
}

.voice-chat:not(:first-child) {
  margin-top: 2.865vw;
}

.voice-chat:not(:last-child) {
  margin-bottom: 2.865vw;
} 

.voice-chat.-chat-a {
  border: 1px solid var(--border-color);
}

.voice-chat.-chat-b {
  background-color: #fff;
  position: relative;
}

.voice-chat.-chat-b::before {
  background-color: var(--body-color);
  color: #fff;
  content: attr(data-name);
  display: inline-block;
  font-size: 1.8rem;
  left: 1.563vw;
  line-height: 1;
  padding: .25em .5em .5em;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}

.voice-chat > p:not(:last-child) {
  margin-bottom: 1em;
}

.voice-chat > .voice-content__figure {
  margin-bottom: 2em;
}

.voice-list-disc,
.voice-list-num {
  line-height: 1.6;
  margin-bottom: 1em;
  padding: 1.042vw;
}

.voice-list-disc.-key {
  border: 1px solid;
  color: var(--color-key);
}

.voice-list-disc li,
.voice-list-num li {
  text-indent: -1em;
  padding-left: 1em;
}

.voice-list-disc li+li,
.voice-list-num li+li {
  margin-top: .6em;
}

.voice-list-num {
  border: 1px solid var(--border-color);
}

.content-voice-cta {
  padding-top: 0;
}

.content-voice-cta::after {
  aspect-ratio: 2;
  background-image: linear-gradient(45deg,#E63A20,#A62B17);
  clip-path: polygon(50% 100%,100% 0,0 0);
  content: "";
  display: block;
  height: 3.125vw;
  margin: 2.08333vw auto 0;
  width: 10.417vw;
}

.content-voice-cta .content__title::before {
  content: none;
}

.content-voice-cta__text {
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
  margin-top: 1em;
}

.content-voice-cta__text-lg {
  font-size: 2.8rem;
}

.content-cta {
  margin-top: 2.083vw;
}

.voice-content.-youtube {
  border: .2rem solid var(--color-key);
  padding: 4rem 13.85rem;
}

.voice-content__youtube-title {
  font-size: 3.2rem;
  letter-spacing: .05em;
  line-height: 1.4;
  margin-bottom: .9em;
  text-align: center;
}

.voice-content__youtube-title .name {
  align-items: center;
  color: var(--color-key);
  display: flex;
  font-size: 2.4rem;
  gap: .5em;
  justify-content: center;
  margin-bottom: .25em;
  padding-bottom: .1em;
  position: relative;
}

.voice-content__youtube-title .name::before,
.voice-content__youtube-title .name::after {
  background-color: var(--color-key);
  content: "";
  height: 4rem;
  width: .2rem;
}

.voice-content__youtube-title .name::before {
  margin-right: .2em;
  transform: rotate(-30deg);
}

.voice-content__youtube-title .name::after {
  transform: rotate(30deg);
}

.youtube-iframe-wrap {
  height: 0;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.youtube-iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ================================================================
  スマホ版レイアウト
================================================================ */
@media screen and (max-width: 767px) {
  .hero-voice {
    display: block;
  }

  .hero-voice__body {
    display: block;
    padding: 8vw 0 8vw 5.333vw;
  }

  .hero-voice__tag {
    border-width: 0.533vw;
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 4vw;
    padding-left: 2.667vw;
  }

  .hero-voice__title {
    font-size: 2.8rem;
    margin-bottom: 2.667vw;
  }

  .hero-voice__title-item {
    padding: 0 2.667vw 0.8vw;
  }

  .hero-voice__sub-title {
    font-size: 1.8rem;
    margin-bottom: 6.667vw;
  }

  .hero-voice__sub-title-item {
    padding: 0.267vw 2.667vw 1.067vw;
  }

  .hero-voice__info {
    font-size: 1.4rem;
  }

  .hero-voice__img {
    height: 50.667vw;
  }

  .voice-contents {
    gap: 13.333vw;
    padding: 13.333vw 5.333vw;
  }

  .voice-content__text {
    font-size: 1.6rem;
    margin-bottom: 2.5em;
  }

  .voice-content__figcaption {
    font-size: 1.4rem;
  }

  .voice-content__history-title {
    font-size: 2.2rem;
    margin-bottom: 5.333vw;
    padding: 4.8vw 5.333vw 5.333vw;
  }

  .voice-content__history-title::before,
  .voice-content__history-title::after {
    width: 5.333vw;
  }

  .voice-content__history:not(:last-child)::after {
    height: 6.4vw;
    margin-bottom: 1.333vw;
    width: 21.333vw;
  }

  .voice-content__history-inner {
    font-size: 1.6rem;
    text-align: left;
    padding: 4.8vw 5.333vw 5.067vw;
  }

  .outline {
    padding: 8vw 5.333vw 5.333vw;
  }

  .outline__title {
    font-size: 2.2rem;
    gap: 4vw;
  }

  .outline__title::before,
  .outline__title::after {
    height: 0.533vw;
    width: 8vw;
  }

  .outline__box {
    padding: 5.333vw;
  }

  .outline__list {
    font-size: 1.4rem;
  }

  .outline__list:not(:last-child) {
    margin-bottom: .8em;
    padding-bottom: .8em;
  }

  .outline__item::before {
    border-width: 0.533vw;
    height: 2.4vw;
    transform: translateY(-1px);
    width: 2.4vw;
  }

  .voice-chat {
    font-size: 1.6rem;
    padding: 5.333vw;
  }

  .voice-chat:not(:last-child) {
    margin-bottom: 9.333vw;
  }

  .voice-chat:not(:first-child) {
    margin-top: 9.333vw;
  }

  .voice-chat.-chat-b::before {
    left: 5.333vw;
    font-size: 1.4rem;
    padding-top: .3em;
  }

  .voice-content.-outline {
    margin-top: -8vw;
    padding-top: 8vw;
  }

  .voice-content__headline {
    font-size: 2.2rem;
    margin-bottom: 5.333vw;
  }

  .voice-content__headline::before {
    height: 0.8vw;
    margin-bottom: 2.667vw;
    width: 16vw;
  }

  .voice-list-disc,
  .voice-list-num {
    padding: 5.333vw 5.333vw 5.333vw 2.667vw;
  }

  .content-voice-cta::after {
    height: 12vw;
    margin-top: 8vw;
    width: 40vw;
  }

  .content-voice-cta .content__title {
    font-size: 2.6rem;
  }

  .content-voice-cta__text {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .content-cta {
    margin-top: 8vw;
  }

  .content-voice-cta__text-lg {
    font-size: 1.8rem;
  }

  .voice-content.-youtube {
    border-width: .1rem;
    padding: 2rem 1.9rem;
  }

  .voice-content__youtube-title {
    font-size: 2.2rem;
  }

  .voice-content__youtube-title .name {
    font-size: 1.8rem;
  }

  .voice-content__youtube-title .name::before,
  .voice-content__youtube-title .name::after {
    height: 2.5rem;
    width: .2rem;
  }
}