@charset "UTF-8";

.about_voice_section {
  margin-top: 100px;
}
.about_voice_content {
  background-color: #F9F9F9;
  background-image: url(../img/about/voice/ring.png);
  background-size: 760px 760px;
  background-repeat: no-repeat;
  background-position: top -227px right -100px;
  border-radius: 16px;
  padding: 44px 72px 28.69px 111.67px;
}
.about_voice_columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 28.58px;
}
.about_voice_column {
  width: 443px;
}
.about_voice_column:nth-child(1) {
  margin-top: 19px;
}
.about_voice_column:nth-child(2) {
  margin-right: 69.33px;
}
.about_voice_column:nth-child(3) {
  margin-top: 6px;
  margin-left: 78.33px;
}
.about_voice_column:nth-child(4) {
  margin-top: -11px;
}
.about_voice_balloon {
  position: relative;
  width: 100%;
  height: 270.1px;
  background-size: cover;
}
.about_voice_column:nth-child(1) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon01.png);
}
.about_voice_column:nth-child(2) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon02.png);
}
.about_voice_column:nth-child(3) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon03.png);
}
.about_voice_column:nth-child(4) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon04.png);
}
.about_voice_balloon::before,
.about_voice_balloon::after {
  content: "";
  position: absolute;
  width: 21.5px;
  height: 12px;
  background-size: cover;
}
.about_voice_balloon::before {
  background-image: url(../img/about/voice/bg-left.png);
}
.about_voice_column:nth-child(1) .about_voice_balloon::before {
  top: 22.94px;
  left: 37.36px;
}
.about_voice_column:nth-child(2) .about_voice_balloon::before {
  top: 22.94px;
  left: 38.36px;
}
.about_voice_column:nth-child(3) .about_voice_balloon::before {
  top: 24.94px;
  left: 40.36px;
}
.about_voice_column:nth-child(4) .about_voice_balloon::before {
  top: 22.94px;
  left: 37.36px;
}
.about_voice_column:nth-child(3) .about_voice_balloon::before {
  background-image: url(../img/about/voice/bg-left-white.png);
}
.about_voice_balloon::after {
  background-image: url(../img/about/voice/bg-right.png);
}
.about_voice_column:nth-child(1) .about_voice_balloon::after {
  bottom: 61.68px;
  right: 44.42px;
}
.about_voice_column:nth-child(2) .about_voice_balloon::after {
  bottom: 61.68px;
  right: 44.42px;
}
.about_voice_column:nth-child(3) .about_voice_balloon::after {
  bottom: 60.68px;
  right: 40.42px;
}
.about_voice_column:nth-child(4) .about_voice_balloon::after {
  bottom: 61.68px;
  right: 44.42px;
}
.about_voice_column:nth-child(3) .about_voice_balloon::after {
  background-image: url(../img/about/voice/bg-right-white.png);
}
.about_voice_balloon_text {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  line-height: calc(39 / 16);
  letter-spacing: 0.125em;
  white-space: nowrap;
  color: var(--primary);
}
.about_voice_column:nth-child(1) .about_voice_balloon_text {
  top: 75px;
  left: 49%;
}
.about_voice_column:nth-child(2) .about_voice_balloon_text {
  top: 58.55px;
  left: 50.5%;
}
.about_voice_column:nth-child(3) .about_voice_balloon_text {
  top: 80.55px;
  color: var(--white);
}
.about_voice_column:nth-child(4) .about_voice_balloon_text {
  top: 75px;
}
.about_voice_balloon_text > span {
  display: inline-block;
  font-size: 20px;
  line-height: calc(39 / 20);
  letter-spacing: 0.1em;
}
.about_voice_column:nth-child(1) .about_voice_balloon_text_marker {
  /* background-image: linear-gradient(transparent 60%, var(--white) 60%, var(--white) 100%); */
  background-image: linear-gradient(#fff, #fff);
}
.about_voice_column:nth-child(2) .about_voice_balloon_text_marker {
  /* background-image:linear-gradient(transparent 60%, var(--white) 85%, transparent 85%); */
  background-image: linear-gradient(#fff, #fff);
}
.about_voice_column:nth-child(3) .about_voice_balloon_text_marker {
  /* background-image:linear-gradient(transparent 60%, rgba(255, 255, 255, 0.2) 85%, transparent 85%); */
  background-image: linear-gradient(rgba(275,275,275,0.2),rgba(275,275,275,0.2));
}
.about_voice_column:nth-child(4) .about_voice_balloon_text_marker {
  /* background-image:linear-gradient(transparent 60%, rgba(0, 96, 176, 0.2) 85%, transparent 85%); */
  background-image: linear-gradient(rgba(0,96,176,0.2),rgba(0,96,176,0.2));
}
.about_voice_meta {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.about_voice_column:nth-child(1) .about_voice_meta{
  margin-top: -71px;
  margin-left: -33.67px;
  column-gap: 8.12px;
}
.about_voice_column:nth-child(2) .about_voice_meta{
  margin-top: -83.69px;
  margin-left: 167.33px;
  column-gap: 9.25px;
}
.about_voice_column:nth-child(3) .about_voice_meta{
  margin-top: -76.26px;
  margin-left: 63.15px;
  column-gap: 9.62px;
}
.about_voice_column:nth-child(4) .about_voice_meta{
  margin-top: -76.26px;
  margin-left: 134px;
  column-gap: 21.15px;
}
.about_voice_meta_img {
  position: relative;
  width: 150px;
  height: 150px;
}
.about_voice_meta_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.about_voice_column:nth-child(2n) .about_voice_meta_img {
  order: 0;
}
.about_voice_column:nth-child(2) .about_voice_meta_img {
  width: 144px;
  height: 144px;
}
.about_voice_meta_img::before {
  display: inline-block;
  position: absolute;
  padding: 4.55px 8.26px;
  border: solid 1px var(--white);
  border-radius: 8px;
  font-size: 13px;
  line-height: calc(16 / 13);
  letter-spacing: 0;
  color: var(--white);
  z-index: 1;
}
.about_voice_column:nth-child(1) .about_voice_meta_img{
  transform: rotate(-4deg);
}
.about_voice_column:nth-child(2) .about_voice_meta_img{
  transform: rotate(2deg);
}
.about_voice_column:nth-child(3) .about_voice_meta_img{
  transform: rotate(-4deg);
}
.about_voice_column:nth-child(4) .about_voice_meta_img{
  transform: rotate(4deg);
}
.about_voice_column:nth-child(1) .about_voice_meta_img::before {
  content: "物流管理部";
  bottom: -10.11px;
  left: -19px;
  background-color: #BBA958;
}
.about_voice_column:nth-child(2) .about_voice_meta_img::before {
  content: "システム部";
  padding: 8.13px 3.28px;
  bottom: -23.26px;
  right: -10.29px;
  letter-spacing: 0.2em;
  background-color: #A598D3;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.about_voice_column:nth-child(3) .about_voice_meta_img::before {
  content: "営業部";
  padding: 8.26px 4.55px;
  bottom: -5.46px;
  left: -11.15px;
  letter-spacing: 0.2em;
  background-color: #CC6454;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.about_voice_column:nth-child(4) .about_voice_meta_img::before {
  content: "物流管理部";
  bottom: -16.75px;
  right: -32.63px;
  background-color: #3372B1;
}
.about_voice_column:nth-child(2n) .about_voice_meta_body {
  order: -1;
}
.about_voice_column:nth-child(1) .about_voice_meta_body {
  margin-bottom: 8.67px;
  margin-left: 16px;
}
.about_voice_column:nth-child(2) .about_voice_meta_body {
  margin-bottom: 5.41px;
  margin-right: 16px;
}
.about_voice_column:nth-child(3) .about_voice_meta_body {
  margin-bottom: 17.71px;
  margin-left: 16px;
}
.about_voice_column:nth-child(4) .about_voice_meta_body {
  margin-bottom: 9.85px;
  margin-right: 16px;
}
.about_voice_meta_name,
.about_voice_meta_year {
  display: block;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--primary);
}
.about_voice_meta_name {
  font-size: 16px;
}
.about_voice_meta_year {
  font-size: 13px;
}
.about_voice_meta_name > span,
.about_voice_meta_year > span {
  display: inline-block;
  font-size: 10px;
}

/* =========================
 アニメーション
========================= */
/* ① balloon 本体 */
.about_voice_balloon{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  /* 擬似要素用 */
  --ps-op: 0;
  --ps-ty: 14px;
  /* ②テキスト用 */
  --text-op: 0;
  --text-ty: 10px;
}
/* balloonの擬似要素（①） */
.about_voice_balloon::before,
.about_voice_balloon::after{
  opacity: var(--ps-op);
  transform: translateY(var(--ps-ty));
  transition: opacity .55s ease, transform .55s ease;
}
/* ② balloon_text：既存 transform: translateX(-50%) を壊さずYだけ加算 */
.about_voice_balloon_text{
  opacity: var(--text-op);
  transform: translateX(-50%) translateY(var(--text-ty));
  transition: opacity .5s ease, transform .5s ease;
}
/* ③ marker：フェードアップ無し / ペンで引く演出のみ */
.about_voice_balloon_text_marker{
  /* フェードやY移動はしない */
  opacity: 1 !important;
  transform: none !important;
  /* 既存の background: linear-gradient(...) を活かして走らせる */
  background-repeat: no-repeat;
  background-position: left bottom;
  /* background-size: 0% 100%; */
  background-position: 0 85%;
  will-change: background-size;
  transition: none !important;
  will-change: background-size;
}
/* 発火（列ごと） */
.about_voice_column.is-inview .about_voice_balloon{
  opacity: 1;
  transform: translateY(0);
  --ps-op: 1;
  --ps-ty: 0px;
  --text-op: 1;
  --text-ty: 0px;
}
/* =========================
  順番（delay）
  ① balloon(+before/after) → ② text → ③ marker（ペン）
========================= */
.about_voice_balloon{
  transition-delay: 0s;        /* ① */
}
.about_voice_balloon::before,
.about_voice_balloon::after{
  transition-delay: 0s;        /* ① */
}
.about_voice_balloon_text{
  transition-delay: .4s;       /* ② */
}
/* ③ marker：is-inviewでペンアニメ（delayはあなたの指定に合わせる） */
.about_voice_column.is-inview .about_voice_balloon_text_marker{
  animation: marker-pen 2s both;
  animation-delay: 1s;         /* ③（基本） */
}
.about_voice_column.is-inview .about_voice_balloon_text_marker:nth-of-type(2){
  animation-delay: 1.3s;
}
.about_voice_column.is-inview .about_voice_balloon_text_marker:nth-of-type(3){
  animation-delay: 1.6s;
}
@keyframes marker-pen{
  0%   { background-size: 0% 7px; }
  100% { background-size: 100% 7px; } /* 収束 */
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .about_voice_balloon,
  .about_voice_balloon::before,
  .about_voice_balloon::after,
  .about_voice_balloon_text{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* balloon_textだけはtranslateX(-50%)が必要なので例外 */
  .about_voice_balloon_text{
    transform: translateX(-50%) !important;
  }
  /* markerは即フル */
  .about_voice_column.is-inview .about_voice_balloon_text_marker{
    animation: none !important;
    background-size: 100% 7px !important;
  }
}


@media(max-width: 1439px){
.about_voice_section {
  margin-top: calc(100/var(--view-size)*100vw);
}
.about_voice_content {
  background-size: calc(760/var(--view-size)*100vw) calc(760/var(--view-size)*100vw);
  background-position: top calc(-227/var(--view-size)*100vw) right calc(-100/var(--view-size)*100vw);
  border-radius: calc(16/var(--view-size)*100vw);
  padding: calc(44/var(--view-size)*100vw) calc(72/var(--view-size)*100vw) calc(28.69/var(--view-size)*100vw) calc(111.67/var(--view-size)*100vw);
}
.about_voice_columns {
  row-gap: calc(28.58/var(--view-size)*100vw);
}
.about_voice_column {
  width: calc(443/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) {
  margin-top: calc(19/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) {
  margin-right: calc(69.33/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) {
  margin-top: calc(6/var(--view-size)*100vw);
  margin-left: calc(78.33/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) {
  margin-top: calc(-11/var(--view-size)*100vw);
}
.about_voice_balloon {
  height: calc(270.1/var(--view-size)*100vw);
}
.about_voice_balloon::before,
.about_voice_balloon::after {
  width: calc(21.5/var(--view-size)*100vw);
  height: calc(12/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon::before {
  top: calc(22.94/var(--view-size)*100vw);
  left: calc(37.36/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_balloon::before {
  top: calc(22.94/var(--view-size)*100vw);
  left: calc(38.36/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon::before {
  top: calc(24.94/var(--view-size)*100vw);
  left: calc(40.36/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_balloon::before {
  top: calc(22.94/var(--view-size)*100vw);
  left: calc(37.36/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon::after {
  bottom: calc(61.68/var(--view-size)*100vw);
  right: calc(44.42/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_balloon::after {
  bottom: calc(61.68/var(--view-size)*100vw);
  right: calc(44.42/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon::after {
  bottom: calc(60.68/var(--view-size)*100vw);
  right: calc(40.42/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_balloon::after {
  bottom: calc(61.68/var(--view-size)*100vw);
  right: calc(44.42/var(--view-size)*100vw);
}
.about_voice_balloon_text {
  font-size: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon_text {
  top: calc(75/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_balloon_text {
  top: calc(58.55/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon_text {
  top: calc(80.55/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_balloon_text {
  top: calc(75/var(--view-size)*100vw);
}
.about_voice_balloon_text > span {
  font-size: calc(20/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_meta{
  margin-top: calc(-71/var(--view-size)*100vw);
  margin-left: calc(-33.67/var(--view-size)*100vw);
  column-gap: calc(8.12/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta{
  margin-top: calc(-83.69/var(--view-size)*100vw);
  margin-left: calc(167.33/var(--view-size)*100vw);
  column-gap: calc(9.25/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta{
  margin-top: calc(-76.26/var(--view-size)*100vw);
  margin-left: calc(63.15/var(--view-size)*100vw);
  column-gap: calc(9.62/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta{
  margin-top: calc(-76.26/var(--view-size)*100vw);
  margin-left: calc(134/var(--view-size)*100vw);
  column-gap: calc(21.15/var(--view-size)*100vw);
}
.about_voice_meta_img {
  width: calc(150/var(--view-size)*100vw);
  height: calc(150/var(--view-size)*100vw);
}
.about_voice_meta_img img{
  border-radius: calc(11/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_img {
  width: calc(144/var(--view-size)*100vw);
  height: calc(144/var(--view-size)*100vw);
}
.about_voice_meta_img::before {
  padding: calc(4.55/var(--view-size)*100vw) calc(8.26/var(--view-size)*100vw);
  border-radius: calc(8/var(--view-size)*100vw);
  font-size: calc(13/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_meta_img::before {
  bottom: calc(-10.11/var(--view-size)*100vw);
  left: calc(-19/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_img::before {
  padding: calc(8.13/var(--view-size)*100vw) calc(3.28/var(--view-size)*100vw);
  bottom: calc(-23.26/var(--view-size)*100vw);
  right: calc(-10.29/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta_img::before {
  padding: calc(8.26/var(--view-size)*100vw) calc(4.55/var(--view-size)*100vw);
  bottom: calc(-5.46/var(--view-size)*100vw);
  left: calc(-11.15/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta_img::before {
  bottom: calc(-16.75/var(--view-size)*100vw);
  right: calc(-32.63/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_meta_body {
  margin-bottom: calc(8.67/var(--view-size)*100vw);
  margin-left: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_body {
  margin-bottom: calc(5.41/var(--view-size)*100vw);
  margin-right: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta_body {
  margin-bottom: calc(17.71/var(--view-size)*100vw);
  margin-left: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta_body {
  margin-bottom: calc(9.85/var(--view-size)*100vw);
  margin-right: calc(16/var(--view-size)*100vw);
}
.about_voice_meta_name {
  font-size: calc(16/var(--view-size)*100vw);
}
.about_voice_meta_year {
  font-size: calc(13/var(--view-size)*100vw);
}
.about_voice_meta_name > span,
.about_voice_meta_year > span {
  font-size: calc(10/var(--view-size)*100vw);
}
@keyframes marker-pen{
  0%   { background-size: 0% calc(7/var(--view-size)*100vw); }
  100% { background-size: 100% calc(7/var(--view-size)*100vw); } /* 収束 */
}
/* =========================
 アニメーション
========================= */
/* ① balloon 本体 */
.about_voice_balloon{
  transform: translateY(calc(14/var(--view-size)*100vw));
  --ps-ty: calc(14/var(--view-size)*100vw);
  --text-ty: calc(10/var(--view-size)*100vw);
}
}

@media(max-width: 768px){
.about_voice_section {
  margin-top: calc(40/var(--view-size)*100vw);
}
.about_voice_content {
  background-image: url(../img/about/voice/ring-sp.png);
  background-size: calc(388.26/var(--view-size)*100vw) calc(388.26/var(--view-size)*100vw);
  background-position: top calc(-116.47/var(--view-size)*100vw) right calc(-50.96/var(--view-size)*100vw);
  border-radius: calc(16/var(--view-size)*100vw);
  padding: calc(38/var(--view-size)*100vw) calc(26/var(--view-size)*100vw) calc(50/var(--view-size)*100vw) calc(25/var(--view-size)*100vw);
}
.about_voice_columns {
  display: block;
  row-gap: calc(28.58/var(--view-size)*100vw);
}
.about_voice_column {
  width: 100%;
}
.about_voice_column:nth-child(1) {
  margin-top: 0;
}
.about_voice_column:nth-child(2) {
  margin-right: 0;
  margin-top: calc(42/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) {
  margin-top: calc(40.89/var(--view-size)*100vw);
  margin-left: 0;
}
.about_voice_column:nth-child(4) {
  margin-top: calc(57/var(--view-size)*100vw);
}
.about_voice_balloon {
  height: calc(187/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon01-sp.png);
}
.about_voice_column:nth-child(2) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon02-sp.png);
}
.about_voice_column:nth-child(3) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon03-sp.png);
}
.about_voice_column:nth-child(4) .about_voice_balloon {
  background-image: url(../img/about/voice/balloon04-sp.png);
}
.about_voice_balloon::before, .about_voice_balloon::after {
  width: calc(15.5 / var(--view-size) * 100vw);
  height: calc(9 / var(--view-size) * 100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon::before {
  top: calc(18/var(--view-size)*100vw);
  left: calc(31/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_balloon::before {
  top: calc(32/var(--view-size)*100vw);
  left: calc(22/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon::before {
  top: calc(19/var(--view-size)*100vw);
  left: calc(30/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_balloon::before {
  top: calc(31/var(--view-size)*100vw);
  left: calc(22/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_balloon::after {
  bottom: calc(32.12/var(--view-size)*100vw);
  right: calc(29.43/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_balloon::after {
  bottom: calc(68.12/var(--view-size)*100vw);
  right: calc(22.43/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon::after {
  bottom: calc(41.12/var(--view-size)*100vw);
  right: calc(20.43/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_balloon::after {
  bottom: calc(71.12/var(--view-size)*100vw);
  right: calc(30.13/var(--view-size)*100vw);
}
.about_voice_balloon_text {
  font-size: calc(12/var(--view-size)*100vw);
  line-height: 1.6;
  letter-spacing: 0.166666666em;
}
.about_voice_column:nth-child(1) .about_voice_balloon_text {
  top: calc(50/var(--view-size)*100vw);
  left: 52%;
}
.about_voice_column:nth-child(2) .about_voice_balloon_text {
  top: calc(44/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_balloon_text {
  top: calc(60/var(--view-size)*100vw);
  left: 53%;
}
.about_voice_column:nth-child(4) .about_voice_balloon_text {
  top: calc(55/var(--view-size)*100vw);
  left: 51%;
}
.about_voice_balloon_text > span {
  font-size: calc(16/var(--view-size)*100vw);
  letter-spacing: 0.125em;
}
.about_voice_column:nth-child(1) .about_voice_meta{
  margin-top: calc(-54.63/var(--view-size)*100vw);
  margin-left: calc(2/var(--view-size)*100vw);
  column-gap: calc(2.12/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta{
  margin-top: calc(-62.89/var(--view-size)*100vw);
  margin-left: calc(124/var(--view-size)*100vw);
  margin-right: calc(-20/var(--view-size)*100vw);
  column-gap: calc(1.25/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta{
  margin-top: calc(-59.25/var(--view-size)*100vw);
  margin-left: calc(-10/var(--view-size)*100vw);
  column-gap: calc(5.62/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta{
  margin-top: calc(-65.89/var(--view-size)*100vw);
  margin-left: calc(122/var(--view-size)*100vw);
  margin-right: calc(-29/var(--view-size)*100vw);
  column-gap: calc(3.15/var(--view-size)*100vw);
}
.about_voice_meta_img {
  width: calc(128/var(--view-size)*100vw);
  height: calc(128/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_img {
  width: calc(128/var(--view-size)*100vw);
  height: calc(128/var(--view-size)*100vw);
}
.about_voice_meta_img::before {
  font-size: calc(12/var(--view-size)*100vw);
}
.about_voice_column:nth-child(1) .about_voice_meta_img::before {
  bottom: calc(-7.88/var(--view-size)*100vw);
  left: calc(6/var(--view-size)*100vw);
  padding: calc(2.55 / var(--view-size) * 100vw) calc(7.26 / var(--view-size) * 100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_img::before {
  padding: calc(8.13/var(--view-size)*100vw) calc(4.28/var(--view-size)*100vw);
  bottom: calc(-11.98/var(--view-size)*100vw);
  right: calc(-7.91/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta_img::before {
  bottom: calc(-15.57/var(--view-size)*100vw);
  left: calc(-3/var(--view-size)*100vw);
  padding: calc(6.26 / var(--view-size) * 100vw) calc(2.55 / var(--view-size) * 100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta_img::before {
  bottom: calc(-8.83/var(--view-size)*100vw);
  right: calc(-4.61/var(--view-size)*100vw);
  transform: rotate(2deg);
  padding: calc(2.55 / var(--view-size) * 100vw) calc(6.26 / var(--view-size) * 100vw);
}
.about_voice_column:nth-child(1) .about_voice_meta_body {
  margin-bottom: calc(6.37/var(--view-size)*100vw);
  margin-left: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(2) .about_voice_meta_body {
  margin-bottom: calc(14.69/var(--view-size)*100vw);
  margin-right: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(3) .about_voice_meta_body {
  margin-bottom: calc(6.75/var(--view-size)*100vw);
  margin-left: calc(16/var(--view-size)*100vw);
}
.about_voice_column:nth-child(4) .about_voice_meta_body {
  margin-bottom: calc(13.69/var(--view-size)*100vw);
  margin-right: calc(16/var(--view-size)*100vw);
}
.about_voice_meta_name {
  font-size: calc(12/var(--view-size)*100vw);
}
.about_voice_meta_year {
  font-size: calc(12/var(--view-size)*100vw);
}
.about_voice_meta_name > span,
.about_voice_meta_year > span {
  font-size: calc(10/var(--view-size)*100vw);
}
/* =========================
 アニメーション
========================= */
/* ① balloon 本体 */
.about_voice_balloon{
  transform: translateY(calc(14/var(--view-size)*100vw));
  --ps-ty: calc(14/var(--view-size)*100vw);
  --text-ty: calc(10/var(--view-size)*100vw);
}
}