/* ============================================================
   05 culture (y 4598-6798, h 2200) / 06 work (y 6798-7958, h 1160)
   座標は各セクション y0 を引いた相対値。すべて絶対配置。
   ============================================================ */

/* 吹き出しがセクション上端をはみ出すため culture のみ overflow 解放 */
.sec--visible { overflow: visible; }

/* 原サイト全体が 'palt'(プロポーショナル字形) 指定。
   横組み和文のかな・約物が詰まり、Values カードの改行位置がこれで決まる。
   縦組みは vpal 側なので影響なし。本来 base.css に置くべき全体設定。 */


/* ---------- 共通: 白丸ボタンのドット⇄矢印スワップ ---------- */
.btn-swap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.btn-swap__dot,
.btn-swap__arrow {
  display: block;
  transition: opacity 0.3s var(--ease);
}
.btn-swap__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.btn-swap__dot--cyan  { background: var(--cyan); }
.btn-swap__dot--blue  { background: var(--blue); }
.btn-swap__dot--white { background: #fff; }
.btn-swap__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: var(--cyan);
  clip-path: polygon(0 40%, 58% 40%, 58% 8%, 100% 50%, 58% 92%, 58% 60%, 0 60%);
  opacity: 0;
}
/* the arrow takes the colour the dot it replaces had, except on the
   flat cyan talk cards where the swap stays white */
.btn-swap__arrow--white { background: #fff; }
.wcard .btn-swap__arrow { background: var(--blue); }
a:hover .btn-swap__dot   { opacity: 0; }
a:hover .btn-swap__arrow { opacity: 1; }

/* ============================================================
   culture
   ============================================================ */
.culture { height: 2200px; background: #fff; }

/* 上端帯 */
.culture__band {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 80px;
  background: var(--lavender);
  z-index: 2;
}
.culture__band-white {
  position: absolute;
  left: 0; top: 0;
  width: 705.594px; height: 80px;
  background: #fff;
  border-radius: 0 16px 0 0;
}
/* solid corner bottom-left: the white panel fillets into the white
   body that starts below the band */
.culture__band-notch {
  position: absolute;
  left: 705.594px;
  top: 64px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 0, transparent 15.4px, #fff 15.8px);
}

/* 本体 */
.culture__body {
  position: absolute;
  left: 0; top: 80px;
  width: 1440px; height: 2120px;
  overflow: hidden;
  z-index: 2;
}

.culture__swoosh {
  position: absolute;
  left: 769px;
  top: -59px;
  width: 720px;
  height: 320px;
  border: 46px solid transparent;
  border-top-color: var(--cyan);
  border-left-color: var(--cyan);
  border-radius: 50%;
  transform: rotate(-24deg);
  filter: blur(1px);
  opacity: 0.9;
  z-index: 1;
}

/* 見出し */
.culture__title {
  position: absolute;
  left: 64px; top: -14px;
  width: 605.125px; height: 160px;
  font-family: var(--font-en);
  font-size: 160px;
  font-weight: 800;
  line-height: 160px;
  letter-spacing: -3.2px;
  color: var(--navy);
  z-index: 3;
}
.culture__sub-dot {
  position: absolute;
  left: 64px; top: 148px;
  width: 30px; height: 20px;
  background: var(--cyan);
  border-radius: 50%;
  z-index: 3;
}
.culture__sub {
  position: absolute;
  left: 102px; top: 146px;
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  color: var(--navy);
  z-index: 3;
}

/* ---------- Values 大カード ---------- */
.culture__card {
  position: absolute;
  left: 64px; top: 234px;
  width: 1312px; height: 623px;
  border-radius: 16px;
  overflow: hidden;
  z-index: 3;
}
/* pale pink base with a soft warm sweep, replacing the painted artwork */
.culture__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 12%, rgba(238, 79, 224, 0.42) 0%, rgba(238, 79, 224, 0) 58%),
    radial-gradient(90% 130% at 104% 72%, rgba(247, 166, 60, 0.75) 0%, rgba(247, 166, 60, 0) 62%),
    linear-gradient(180deg, #fcf2ef 0%, #f7e8e3 100%);
  border-radius: 16px;
  z-index: -2;
}

/* the wide arc sweeping across the card */
.culture__card-swoosh {
  position: absolute;
  left: -268px;
  top: -268px;
  width: 1848px;
  height: 1145px;
  background: radial-gradient(closest-side,
    rgba(247, 166, 60, 0) 0 58%,
    rgba(247, 166, 60, 0.55) 68%,
    rgba(238, 79, 224, 0.32) 76%,
    rgba(238, 79, 224, 0) 84%);
  transform: rotate(-12deg);
  filter: blur(16px);
  z-index: 0;
}

/* band of characters drifting across the card, replacing the sprite sheet */
@keyframes logoAnimation {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.culture__sprite {
  position: absolute;
  left: 0; top: 243px;
  width: 1312px; height: 352px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  z-index: 1;
}
.culture__sprite-row {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 48px;
  padding-right: 48px;
  animation: logoAnimation 90s linear infinite;
}
.culture__sprite-row img { height: auto; }

/* huge per-letter wordmark; each glyph carries one palette token */
@keyframes cultureLetterFloat {
  0%   { transform: translateY(6px); }
  100% { transform: translateY(-6px); }
}
.culture__card-logo {
  position: absolute;
  left: 55px; top: 40px;
  display: flex;
  align-items: baseline;
  font-family: var(--font-en);
  font-size: 128px;
  font-weight: 800;
  line-height: 152px;
  letter-spacing: -2px;
  z-index: 2;
}
.culture__card-logo span {
  display: inline-block;
  animation: cultureLetterFloat 2.6s ease-in-out infinite alternate;
}
.culture__card-logo .jp {
  font-family: var(--font-jp);
  font-size: 84px;
  font-weight: 900;
}
.culture__card-logo span:nth-child(1)  { color: var(--orange);   animation-delay: 0s; }
.culture__card-logo span:nth-child(2)  { color: var(--magenta);  animation-delay: -0.2s; }
.culture__card-logo span:nth-child(3)  { color: var(--cyan);     animation-delay: -0.4s; }
.culture__card-logo span:nth-child(4)  { color: var(--navy);     animation-delay: -0.6s; }
.culture__card-logo span:nth-child(5)  { color: var(--green);    animation-delay: -0.8s; }
.culture__card-logo span:nth-child(6)  { color: var(--blue);     animation-delay: -1s; }
.culture__card-logo span:nth-child(7)  { color: var(--red);      animation-delay: -1.2s; }
.culture__card-logo span:nth-child(8)  { color: var(--pink);     animation-delay: -1.4s; }
.culture__card-logo span:nth-child(9)  { color: var(--orange);   animation-delay: -1.6s; }
.culture__card-logo span:nth-child(10) { color: var(--cyan);     animation-delay: -1.8s; }

.culture__more {
  position: absolute;
  left: 55px; top: 288px;
  width: 260px; height: 260px;
  background: #fff;
  border-radius: 50%;
  z-index: 3;
}
.culture__more-label {
  position: absolute;
  left: 0; top: 90px;
  width: 260px;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  color: var(--navy);
}
.culture__more .btn-swap {
  left: 130px;
  top: 156px; /* 146px + 高さ21.33/2 */
}
.culture__more .btn-swap__arrow { width: 24px; height: 21px; }

/* ---------- Photo Library ---------- */
.culture__video {
  position: absolute;
  left: 64px; top: 897px;
  width: 1312px; height: 345px;
  background: var(--navy);
  border: 16px solid var(--cyan);
  border-radius: 16px;
  overflow: hidden;
  z-index: 4;
}
/* two tilted rows of stills on a dark ground, replacing the video collage */
.culture__video-strip {
  position: absolute;
  inset: 0;
  background: var(--navy);
  overflow: hidden;
}
.culture__video-inner {
  position: absolute;
  left: -80px; top: -60px;
  width: 1500px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotate(-8deg);
}
.culture__video-row {
  display: flex;
  gap: 14px;
}
.culture__video-row--offset { margin-left: -180px; }
.culture__video-row img {
  flex: none;
  width: 360px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.culture__video-tab {
  position: absolute;
  left: 0; top: 207px;
  width: 608.672px; height: 106px;
  padding: 29px 119px 5px 0;
  background: var(--cyan);
  border-radius: 0 16px 0 0;
  z-index: 3;
}
.culture__video-tabtext {
  display: block;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 700;
  line-height: 72px;
  color: #fff;
}
/* solid corner bottom-left on both: the cyan frame fillets into the tab */
.culture__video-notch1,
.culture__video-notch2 {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 0, transparent 15.4px, var(--cyan) 15.8px);
}
.culture__video-notch1 { left: 0; top: -16px; }
.culture__video-notch2 { left: 608.672px; top: 90px; }

.culture__video-btn {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 100px; height: 100px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
}

/* ---------- 大切にしていること(Values 3枚) ---------- */
.culture__rule {
  position: absolute;
  left: 64px; top: 1323px;
  width: 1312px; height: 1px;
  background: var(--navy);
}
.culture__tab {
  position: absolute;
  left: 64px; top: 1324px;
  height: 31px;
  padding: 7px 48px 6px 12px;
  background: var(--navy);
  border-radius: 0 0 16px 0;
}
.culture__tab-dot {
  position: absolute;
  left: 12px; top: 13px;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}
.culture__tab-text {
  display: block;
  margin-left: 18px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
}
.culture__tab-notch {
  position: absolute;
  left: 100%; top: 0;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 100%, transparent 15.4px, var(--navy) 15.8px);
}

.culture__heading {
  position: absolute;
  left: 64px; top: 1391px;
  font-size: 80px;
  font-weight: 900;
  line-height: 80px;
  letter-spacing: 2.4px;
  color: var(--navy);
}

.culture__talks {
  position: absolute;
  left: 64px; top: 1511px;
  display: flex;
  gap: 15px;
  width: 1312px;
  list-style: none;
}
.culture__talks > li { width: 427.281px; }

/* taller than the reference card: the value statements carry body copy
   under the title bar where the reference had none */
.talk {
  position: relative;
  display: block;
  width: 427.281px;
  height: 512px;
  background: var(--cyan);
  border-radius: 16px;
}
.talk__frame {
  position: absolute;
  left: 0; top: 0;
  width: 427.281px; height: 290.188px;
  border: 8px solid var(--cyan);
  border-radius: 16px;
  overflow: hidden;
}
.talk__frame img { width: 100%; height: 100%; object-fit: cover; }

.talk__badge {
  position: absolute;
  left: 8px; top: 8px;
  height: 62px;
  padding: 2px 33px 0 0;
  background: var(--cyan);
  border-radius: 0 0 16px 0;
  white-space: nowrap;
  font-size: 0;   /* インラインブロックのストラット高を殺す */
  line-height: 0;
  z-index: 2;
}
.talk__hash,
.talk__num {
  display: inline-block;
  vertical-align: top;
  font-family: var(--font-en);
  font-weight: 700;
  color: #fff;
}
.talk__hash { margin-top: 4px; font-size: 20px; line-height: 20px; }
.talk__num  { font-size: 60px; line-height: 60px; }
/* solid corner top-left: the badge fillets into the frame border */
.talk__badge-notch1,
.talk__badge-notch2 {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 100%, transparent 15.4px, var(--cyan) 15.8px);
}
.talk__badge-notch1 { left: 100%; top: 0; }
.talk__badge-notch2 { left: 0; top: 100%; }

.talk__title {
  position: absolute;
  left: 0; top: 242px;
  width: 379.281px;
  padding: 16px 16px 0;
  background: var(--cyan);
  border-radius: 0 16px 0 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 0.96px;
  color: #fff;
  z-index: 2;
}
/* solid corner bottom-left: the title bar fillets into the frame border */
.talk__title-notch1,
.talk__title-notch2 {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle 16px at 100% 0, transparent 15.4px, var(--cyan) 15.8px);
}
.talk__title-notch1 { left: 100%; top: 24px; }
.talk__title-notch2 { left: 8px; top: -16px; }

.talk__body {
  position: absolute;
  left: 16px; top: 358px;
  width: 336px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.28px;
  color: #fff;
}

.talk__btn {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 60px; height: 60px;
  z-index: 2;
}

/* ---------- 吹き出し + 歩くキャラ ---------- */
@keyframes top_culture_float01 {
  0%   { transform: translateY(10px); }
  100% { transform: translateY(-20px); }
}
.culture__chars {
  position: absolute;
  left: 870px; top: 41px;
  width: 420px; height: 273px;
  z-index: 2;
}
.culture__bubble {
  position: absolute;
  left: -171px; top: -51.85px;
  width: auto; height: 64px;
  white-space: nowrap;
  padding: 12px 28px;
  background: var(--cyan);
  border-radius: 128px;
  font-size: 16px;
  font-weight: 900;
  /* single-line copy centred in the 40px content box */
  line-height: 40px;
  letter-spacing: 0.48px;
  color: #fff;
  z-index: 2;
  animation: top_culture_float01 3s ease-in-out infinite alternate;
}
.culture__bubble-tail {
  position: absolute;
  right: 19px; top: 47px;
  width: 25px; height: 20px;
  background: var(--cyan);
  clip-path: polygon(87% 81%, 42% 18%, 25% 50%);
}
.culture__chars-float {
  position: absolute;
  left: 0; top: 0.67px;
  animation: top_culture_float01 2s ease-in-out infinite alternate;
}

/* ============================================================
   work
   ============================================================ */
.work { height: 1160px; background: var(--navy); }

.work__band {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 80px;
  background: #fff;
  z-index: 2;
}
/* the original has a plain white strip here — no navy tab */
.work__band-navy { display: none; }
.work__band-notch { display: none; }

/* 縦組み見出し: 欧文は vertical-rl で90度回転、和文は正立 */
.work__title {
  position: absolute;
  left: 46px; top: 80px;
  width: 160px;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 160px;
  font-weight: 800;
  line-height: 160px;
  letter-spacing: -3.2px;
  color: #fff;
  z-index: 3;
}
.work__sub-dot {
  position: absolute;
  left: 211px; top: 80px;
  width: 20px; height: 30px;
  background: var(--blue);
  border-radius: 50%;
  z-index: 3;
}
.work__sub {
  position: absolute;
  left: 208px; top: 118px;
  width: 25.1875px;
  writing-mode: vertical-rl;
  font-size: 24px;
  font-weight: 900;
  line-height: 25.2px;
  letter-spacing: 0.72px;
  color: #fff;
  z-index: 3;
}

/* shallow arch sweeping in from the bottom-right; the section crops it */
.work__swoosh {
  position: absolute;
  left: 860px; top: 800px;
  width: 900px;
  height: 460px;
  border: 56px solid transparent;
  border-top-color: var(--blue);
  border-right-color: var(--blue);
  border-radius: 50%;
  filter: blur(2px);
  z-index: 1;
}

/* ---------- 写真カード ---------- */
.wcard {
  position: absolute;
  display: block;
  width: 320.5px;
  z-index: 3;
}
.wcard--1 { left: 1056px; top: 160px; height: 422px; }
.wcard--2 { left: 719px;  top: 320px; height: 422px; }
.wcard--3 { left: 383px;  top: 480px; height: 422px; }
.wcard--4 { left: 46px;   top: 640px; height: 399.812px; }

.wcard__frame {
  position: absolute;
  inset: 0;
  border: 8px solid var(--blue);
  border-radius: 16px;
  overflow: hidden;
}
.wcard__frame img { width: 100%; height: 100%; object-fit: cover; }

.wcard__tab {
  position: absolute;
  right: 8px; top: 8px;
  padding: 8px 16px 16px 24px;
  background: var(--blue);
  border-radius: 0 0 0 16px;
  z-index: 2;
}
.wcard__tabtext {
  display: block;
  width: 29.3906px;
  writing-mode: vertical-rl;
  font-size: 28px;
  font-weight: 900;
  line-height: 29.4px;
  letter-spacing: 0.84px;
  color: #fff;
}
/* keep latin runs upright inside the vertical label (tate-chu-yoko) */
.wcard__tabtext .tcy { text-combine-upright: all; }

/* solid corner top-right: the blue frame fillets into the label tab */
.wcard__notch1,
.wcard__notch2 {
  position: absolute;
  width: 16px;
  height: 17px;
  background: radial-gradient(circle 16px at 0 100%, transparent 15.4px, var(--blue) 15.8px);
}
.wcard__notch1 { left: -16px; top: -1px; }
.wcard__notch2 { right: 0; top: 100%; margin-top: -1.5px; }

.wcard__btn {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 80px; height: 80px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
}

/* ---------- 吹き出し + ジャンプするキャラ ---------- */
@keyframes top_work_float01 {
  0%   { transform: translateY(20px); }
  100% { transform: translateY(-10px); }
}
.work__chars {
  position: absolute;
  left: 487px; top: 86px;
  width: 295px; height: 312px;
  z-index: 3;
}
.work__bubble {
  position: absolute;
  left: -230px; top: 20px;
  width: auto; height: 64px;
  padding: 12px 28px;
  background: var(--blue);
  border-radius: 128px;
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0.48px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  animation: top_work_float01 3s ease-in-out infinite alternate;
}
.work__bubble-tail {
  position: absolute;
  right: 12px; top: 46px;
  width: 25px; height: 20px;
  background: var(--blue);
  clip-path: polygon(87% 81%, 42% 18%, 25% 50%);
}
.work__chars-float {
  position: absolute;
  left: 0; top: 0.37px;
  animation: top_work_float01 2s ease-in-out infinite alternate;
}

/* オンラインアシスタント(10文字)の縦書きラベルが収まるように */
.wcard--4 .wcard__tabtext { font-size: 1.35rem; letter-spacing: .04em; }

/* title bar right-edge notch floated over the photo and read as a glitch */
.talk__title-notch1 { display: none; }