/* ABOUT（pages/about.vue） */
.block {
  position: relative;
}

.block + .block {
  margin-top: 60px;
}

/* ---------- 上の枠（列幅は TOP の枠と同じ） ---------- */
.about-frame {
  --cols: 10.62% 54.83% 25.48% 9.07%;
  --menu-pt: 27px;
  --frame-bw: 2.5px;
}

.about-frame .frame-body {
  grid-template-rows: auto auto;
}

.about-frame .label,
.map-frame .label {
  height: 42px;
  padding-left: 2%;
}

.about-frame .label.c1,
.map-frame .label.c1 {
  padding-left: 11.9%;
}

.about-frame .label.c3 {
  padding-left: 3.2%;
}

.about-frame .label.c4,
.map-frame .label.c4 {
  padding-left: 11.5%;
}

.about-frame .frame-menu,
.map-frame .frame-menu {
  padding-left: 11.9%;
}

.about-frame .frame-menu .menu-list,
.map-frame .frame-menu .menu-list {
  gap: 12px;
  letter-spacing: 1px;
}

/* コピー。ACTION 列（コピー / 会社概要）の内側の余白は PC 28px 16px、SP 32px 12px。
   下を歩くバケツくんのぶんは本文の下の余白（.desc の margin-bottom）で空ける */
.about-frame .copy {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 46.46vw; /* 669 / 1440 */
  padding: 28px 16px;
  overflow: hidden;
}

.about-frame .copy .headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.3vw; /* 62 / 1440 */
  line-height: 1.45;
  letter-spacing: 2.48px;
  white-space: nowrap;
}

.about-frame .copy .desc {
  width: 77.5%;
  margin: 40px 0 110px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.2vw;
  line-height: 2;
  letter-spacing: 0.28px;
}

/*
 * baketsu_anim.png の絵は画像の下中央（高さの 48%）にあるので、
 * デザインの 68 x 92 に絵が収まるよう画像全体を 190px 高で置く
 */
.about-frame .walker {
  position: absolute;
  left: 100%;
  bottom: -3px;
  width: auto;
  height: 14vw;
  max-width: none;
  pointer-events: none;
  animation: walk 18s linear infinite;
}

@keyframes walk {
  from {
    left: 100%;
  }
  to {
    left: -184px;
  }
}

/* 会社概要（566px 幅、行間 21px、破線の下罫） */
.about-frame .profile {
  grid-column: 2;
  grid-row: 2;
  padding: 28px 16px;
}

.about-frame .rows {
  display: flex;
  flex-direction: column;
  gap: 21px;
  width: 76.7%; /* 566 / 738 */
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  letter-spacing: 2px;
}

.about-frame .row {
  display: flex;
  gap: 3px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--pink);
}

.about-frame .row dt {
  flex: none;
  width: 160px;
  font-size: 12px;
  line-height: 1;
}

.about-frame .row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.map-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.map-link:hover {
  opacity: 0.6;
}

/* PICTURE 列 */
.about-frame .picture {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.about-frame .picture .tile {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 342 / 190;
  background: #000;
  overflow: hidden;
  animation: tile-in 0.5s ease-out;
}

.about-frame .picture .tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes tile-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.about-frame .scroll-cell,
.map-frame .scroll-cell {
  grid-column: 4;
  grid-row: 1 / -1;
  padding: 58px 0px 28px 0px;
  border-right: none;
  border-bottom: none;
}

/* ---------- 下の枠（MAP） ---------- */
.map-frame {
  --cols: 10.62% 80.31% 9.07%;
  --menu-pt: 27px;
  --frame-bw: 2.5px;
}

.map-frame .frame-body {
  grid-template-rows: auto auto auto auto;
}

.map-frame .scroll-cell {
  grid-column: 3;
}

/* 名前 32px、住所 14px。行の高さ 103px */
.map-frame .studio {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  min-height: 103px;
  padding: 28px 32px;
}

.map-frame .studio-name {
  flex: none;
  width: 21.5%; /* 249 / 1081 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: 1.28px;
  white-space: nowrap;
}

.map-frame .studio-addr {
  padding-top: 5px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.56px;
}

.map-frame .studio-addr .map-link {
  display: inline-block;
  margin-top: -3px;
}

.map-frame .map {
  grid-column: 2;
  height: 548px;
}

.map-frame .map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1);
}

/* ---------- SP: 1 列に流す ---------- */
@media (max-width: 767px) {
  .block + .block {
    margin-top: 30px;
  }

  .about-frame,
  .map-frame {
    --cols: 100%;
  }

  .about-frame .frame-body,
  .map-frame .frame-body {
    grid-template-rows: none;
  }

  .about-frame .label.c1,
  .about-frame .label.c3,
  .about-frame .label.c4,
  .map-frame .label.c1,
  .map-frame .label.c4,
  .about-frame .scroll-cell,
  .map-frame .scroll-cell {
    display: none;
  }

  .about-frame .label,
  .map-frame .label {
    height: var(--head-h);
    padding-left: 12.5px;
  }

  .about-frame .copy,
  .about-frame .profile,
  .about-frame .picture,
  .map-frame .studio,
  .map-frame .map {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
  }

  .about-frame .copy {
    min-height: 0;
    padding: 32px 12px;
  }

  .about-frame .copy .headline {
    font-size: 9vw;
    letter-spacing: 0.5px;
  }

  .about-frame .copy .desc {
    width: auto;
    margin: 20px 0 78px;
    font-size: 14px;
    line-height: 1.8;
  }

  .about-frame .walker {
    height: 130px;
  }

  @keyframes walk {
    from {
      left: 100%;
    }
    to {
      left: -126px;
    }
  }

  .about-frame .profile {
    padding: 32px 12px;
  }

  .about-frame .profile.no-b {
    border-bottom: 1px solid var(--pink);
  }

  .about-frame .rows {
    width: auto;
    letter-spacing: 1px;
  }

  .about-frame .row {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
  }

  .about-frame .row dt {
    width: auto;
  }

  .about-frame .picture {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .about-frame .picture .tile {
    width: 50%;
  }

  .about-frame .picture .tile:nth-child(n + 5) {
    display: none;
  }

  .map-frame .studio {
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 10px 12px 12px 12px;
  }

  .map-frame .studio-name {
    width: auto;
    font-size: 22px;
  }

  .map-frame .studio-addr {
    padding-top: 0;
    font-size: 12px;
  }

  .map-frame .map {
    height: 62vw;
  }
}