/* ============================================================
   Section 3: About  (y0 = 2286, h = 1129)
   Section 4: Business (y0 = 3415, h = 1183)
   Coordinates are absolute page-x / (absolute-y - section y0).
   ============================================================ */

@keyframes top_about_float01 {
  0%   { transform: translateY(10px); }
  100% { transform: translateY(-10px); }
}

@keyframes top_business_float01 {
  0%   { transform: translateY(20px); }
  100% { transform: translateY(-10px); }
}

/* The source enables proportional kana on every Japanese text node
   (font-feature-settings: 'palt' 1). Without it small kana render
   full-width and JP headings run several px too wide.
   Site-wide in the original — worth hoisting into base.css. */
.about__sub-text,
.about__row-title,
.about__tag,
.about__bubble-text,
.business__sub-text,
.business__name-text,
.business__bubble-text {
  font-feature-settings: 'palt' 1;
}

/* ---------------------------------------------------------- */
/* About                                                       */
/* ---------------------------------------------------------- */

.about {
  height: 1129px;
  background: #fff;
  /* characters float ~10px past the top edge, as in the source DOM */
  overflow: visible;
}

/* everything except the characters is clipped by this layer */
.about__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* decorative sweep — an elliptical arc drawn with a thick transparent
   border, standing in for the painted swoosh of the reference layout */
.about__swoosh {
  position: absolute;
  left: 769px;
  top: -44px;
  width: 720px;
  height: 320px;
  border: 44px solid transparent;
  border-top-color: var(--orange);
  border-left-color: var(--orange);
  border-radius: 50%;
  transform: rotate(-28deg);
  filter: blur(1px);
  opacity: 0.9;
  z-index: 1;
}

/* --- heading --- */

.about__head {
  position: absolute;
  left: 64px;
  top: 103px;
  z-index: 3;
}

.about__en {
  font-family: var(--font-en);
  font-size: 160px;
  font-weight: 800;
  line-height: 160px;
  letter-spacing: -3.2px;
  color: var(--navy);
}

.about__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.about__sub-dot {
  flex: none;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
}

.about__sub-text {
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  color: var(--navy);
}

/* --- framed photo card (About 01-04 stacked, only 01 shown) --- */

.about__cards {
  position: absolute;
  left: 64px;
  top: 351px;
  width: 662px;
  height: 662px;
  z-index: 3;
}

.about__card {
  position: absolute;
  inset: 0;
  border: 16px solid var(--orange);
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.about__card.is-active {
  opacity: 1;
}

.about__photo {
  width: 630px;
  height: 630px;
  object-fit: cover;
}

.about__tab {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 43px;
  padding: 0 11px 11px 0;
  background: var(--orange);
  border-radius: 0 0 16px 0;
  z-index: 2;
}

.about__tab-text {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.64px;
  color: #fff;
  white-space: nowrap;
}

/* inverted (concave) corners that tie the tab into the card frame.
   Solid corner top-left, quarter disc removed from the bottom-right. */
.about__notch {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 100%, transparent 15.4px, var(--orange) 15.8px);
}

.about__notch--r { left: 250px; top: 0; }
.about__notch--b { left: 0; top: 43px; }

/* --- link list --- */

.about__list {
  position: absolute;
  left: 798px;
  top: 390px;
  width: 578px;
  border-top: 1px solid var(--navy);
  z-index: 3;
}

.about__row {
  display: block;
  height: 165px;
  padding: 32px 16px 39px 0;
  border-bottom: 1px solid var(--navy);
  background: #fff;
  transition: opacity 0.3s var(--ease);
}

.about__row:hover {
  opacity: 0.6;
}

.about__row-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 93px;
}

.about__row-txt {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.about__row-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 48px;
  letter-spacing: 0.96px;
  color: var(--navy);
  white-space: nowrap;
}

.about__tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.about__tag {
  padding: 6px 10px;
  background: #fff;
  border: 2px solid var(--orange);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.8px;
  color: var(--navy);
  white-space: nowrap;
}

.about__go {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.about__go-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

/* arrow, hidden in the source until the row's hover state runs */
.about__go-arrow {
  position: absolute;
  width: 16px;
  height: 14px;
  background: var(--orange);
  clip-path: polygon(0 40%, 58% 40%, 58% 8%, 100% 50%, 58% 92%, 58% 60%, 0 60%);
  opacity: 0;
}

/* --- floating characters --- */

.about__chara {
  position: absolute;
  left: 927px;
  top: 0;
  width: 391px;
  height: 333px;
  z-index: 2;
}

.about__chara-float {
  animation: top_about_float01 2s ease-in-out infinite alternate;
}

.about__bubble {
  position: absolute;
  left: -188px;
  top: 54px;
  width: auto;
  white-space: nowrap;
  height: 64px;
  padding: 12px 28px;
  background: var(--orange);
  border-radius: 128px;
  z-index: 2;
  animation: top_about_float01 3s ease-in-out infinite alternate;
}

.about__bubble-text {
  font-size: 16px;
  font-weight: 900;
  /* single-line copy, centred in the same 40px content box the
     two-line reference text filled */
  line-height: 40px;
  letter-spacing: 0.48px;
  color: #fff;
  white-space: nowrap;
}

.about__bubble-tail {
  position: absolute;
  right: 19px;
  top: 47px;
  width: 25px;
  height: 20px;
  background: var(--orange);
  clip-path: polygon(87% 81%, 42% 18%, 25% 50%);
}

/* ---------------------------------------------------------- */
/* Business                                                    */
/* ---------------------------------------------------------- */

.business {
  height: 1183px;
  background: var(--lavender);
}

/* white strip; the lavender panel rises through it on the left */
.business__top {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 80px;
  background: #fff;
  z-index: 1;
}

.business__top-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 706px;
  height: 80px;
  background: var(--lavender);
  border-radius: 0 16px 0 0;
}

/* solid corner bottom-left: the lavender panel fillets into the
   lavender field that starts below the white strip */
.business__top-notch {
  position: absolute;
  left: 706px;
  top: 64px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 0, transparent 15.4px, var(--lavender) 15.8px);
}

/* wide green sweep entering from the left edge; the section clips it */
.business__swoosh {
  position: absolute;
  left: 0;
  top: -130px;
  width: 1240px;
  height: 520px;
  border: 52px solid transparent;
  border-left-color: var(--green);
  border-bottom-color: var(--green);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}

/* --- heading (right aligned) --- */

.business__head {
  position: absolute;
  left: 64px;
  top: 155px;
  width: 1312px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 3;
}

.business__en {
  font-family: var(--font-en);
  font-size: 160px;
  font-weight: 800;
  line-height: 160px;
  letter-spacing: -3.2px;
  color: var(--navy);
}

.business__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.business__sub-dot {
  flex: none;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
}

.business__sub-text {
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  color: var(--navy);
}

/* --- framed photo cards --- */

/* three cards share the 1312px content width with the same 16px gutters
   the two-card reference used; the 160px stagger keeps the diagonal */
.business__card {
  position: absolute;
  width: 426.667px;
  height: 426.667px;
  border: 16px solid var(--green);
  border-radius: 16px;
  overflow: hidden;
  z-index: 4;
  transition: transform 0.3s var(--ease);
}

.business__card--01 { left: 64px;      top: 375px; }
.business__card--02 { left: 506.667px; top: 535px; }
.business__card--03 { left: 949.333px; top: 695px; }

.business__card:hover {
  transform: translateY(-8px);
}

.business__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business__tab {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 43px;
  padding: 0 11px 11px 0;
  background: var(--green);
  border-radius: 0 0 16px 0;
  z-index: 2;
}

.business__tab-text {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.64px;
  color: var(--navy);
  white-space: nowrap;
}

.business__name {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 72px;
  padding: 24px 64px 12px 0;
  background: var(--green);
  border-radius: 0 16px 0 0;
  z-index: 2;
}

.business__name-text {
  font-size: 26px;
  font-weight: 900;
  line-height: 26px;
  letter-spacing: 0.8px;
  color: var(--navy);
  white-space: nowrap;
}

/* solid corner top-left, quarter disc removed bottom-right;
   the --t / --re variants flip it with the scaleY below */
.business__notch {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 100%, transparent 15.4px, var(--green) 15.8px);
}

/* tab notches: solid corner points up-left */
.business__notch--r { left: 250px; top: 0; }
.business__notch--b { left: 0; top: 43px; }

/* name-bar notches sit below the label, so the fillet is flipped vertically */
.business__notch--t  { left: 0;    top: -16px; transform: scaleY(-1); }
.business__notch--re { left: 100%; bottom: 0;  transform: scaleY(-1); }

.business__go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 128px;
  z-index: 2;
}

.business__go-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
}

.business__go-arrow {
  position: absolute;
  width: 16px;
  height: 14px;
  background: var(--green);
  clip-path: polygon(0 40%, 58% 40%, 58% 8%, 100% 50%, 58% 92%, 58% 60%, 0 60%);
  opacity: 0;
}

/* --- floating character --- */

.business__chara {
  position: absolute;
  left: 156px;
  top: 26px;
  width: 230px;
  height: 350px;
  z-index: 2;
}

.business__chara-float {
  animation: top_business_float01 2s ease-in-out infinite alternate;
}

.business__bubble {
  position: absolute;
  left: 161px;
  top: 138px;
  width: 246px;
  height: 64px;
  padding: 12px 28px;
  background: var(--green);
  border-radius: 128px;
  z-index: 2;
  animation: top_business_float01 3s ease-in-out infinite alternate;
}

.business__bubble-text {
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0.48px;
  color: var(--navy);
  white-space: nowrap;
}

.business__bubble-tail {
  position: absolute;
  left: -7px;
  top: -4px;
  width: 25px;
  height: 21px;
  background: var(--green);
  clip-path: polygon(11% 19%, 58% 82%, 77% 49%);
}