/* ============================================================
   mobile-mid.css — <768px overrides for About / Services /
   Culture / Work. The desktop composition is absolute-positioned
   inside a 1440px page; here every block is returned to normal
   flow, stacked with padding, and the decorations are shrunk or
   dropped so nothing pokes out past the viewport.
   ============================================================ */

@media (max-width: 767px) {

/* ============================================================
   About
   ============================================================ */

.about {
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 0 56px;
}
.about__chara { order: 1; }
.about__inner { order: 2; }

.about__inner {
  position: static;
  overflow: visible;
  padding: 0 20px;
}

/* shrunk sweep tucked behind the top-right corner */
.about__swoosh {
  left: auto;
  right: -96px;
  top: -34px;
  width: 300px;
  height: 150px;
  border-width: 26px;
  transform: rotate(-24deg);
  opacity: 0.55;
}

/* --- character + bubble, above the heading --- */

.about__chara {
  position: static;
  width: auto;
  height: auto;
  padding: 0 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.about__bubble {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  padding: 9px 18px;
}
.about__bubble-text {
  font-size: 13px;
  line-height: 22px;
}
.about__bubble-tail {
  right: 26px;
  top: 100%;
  margin-top: -2px;
  width: 18px;
  height: 15px;
}
.about__chara-float img { width: 112px; height: auto; }

/* --- heading --- */

.about__head { position: static; }
.about__en {
  font-size: clamp(4.8rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.about__sub {
  height: auto;
  margin-top: 8px;
  gap: 7px;
}
.about__sub-dot { width: 22px; height: 15px; }
.about__sub-text { font-size: 16px; line-height: 18px; }

/* --- framed photo card --- */

.about__cards {
  position: static;
  width: 100%;
  height: auto;
  margin-top: 24px;
}
.about__card {
  position: relative;
  inset: auto;
  display: none;
  border-width: 10px;
  border-radius: 14px;
}
.about__card.is-active { display: block; }
.about__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.about__tab {
  width: 158px;
  height: 34px;
  padding: 0 8px 8px 0;
  border-radius: 0 0 12px 0;
}
.about__tab-text { font-size: 24px; line-height: 24px; }
.about__notch {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 100%, transparent 11.4px, var(--orange) 11.8px);
}
.about__notch--r { left: 158px; top: 0; }
.about__notch--b { left: 0; top: 34px; }

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

.about__list {
  position: static;
  width: 100%;
  margin-top: 34px;
}
.about__row {
  height: auto;
  padding: 16px 0;
}
.about__row-in {
  height: auto;
  min-height: 64px;
  gap: 10px;
}
.about__row-txt { gap: 10px; }
.about__row-title {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.6px;
  white-space: normal;
}
.about__tags { flex-wrap: wrap; gap: 6px; }
.about__tag {
  padding: 5px 8px;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.4px;
}
.about__go { width: 44px; height: 44px; }
.about__go-dot { width: 10px; height: 10px; }

/* ============================================================
   Services (business)
   ============================================================ */

.business {
  height: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 118px;
}
.business__top    { order: 0; }
.business__head   { order: 1; }
.business__chara  { order: 2; }
.business__card   { order: 3; }

/* white-to-lavender transition strip */
.business__top {
  position: relative;
  width: 100%;
  height: 40px;
}
.business__top-fill { width: 62%; height: 40px; border-radius: 0 12px 0 0; }
.business__top-notch {
  left: 62%;
  top: 28px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 0, transparent 11.4px, var(--lavender) 11.8px);
}

/* moved to the empty lavender run below the last card so it no longer
   sweeps across the heading */
.business__swoosh {
  left: -150px;
  top: auto;
  bottom: 6px;
  width: 430px;
  height: 224px;
  border-width: 32px;
  opacity: 0.85;
}

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

.business__head {
  position: static;
  width: auto;
  padding: 30px 20px 0;
}
.business__en {
  font-size: clamp(4.2rem, 17vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.business__sub {
  height: auto;
  margin-top: 8px;
  gap: 7px;
}
.business__sub-dot { width: 22px; height: 15px; }
.business__sub-text { font-size: 16px; line-height: 18px; }

/* --- character + bubble, above the cards --- */

.business__chara {
  position: static;
  width: auto;
  height: auto;
  padding: 0 20px;
  margin: 20px 0 22px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
}
.business__chara-float img { width: 118px; height: auto; }
.business__bubble {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  padding: 9px 18px;
}
.business__bubble-text {
  font-size: 13px;
  line-height: 20px;
}
.business__bubble-tail {
  left: 26px;
  top: -8px;
  width: 18px;
  height: 15px;
}

/* --- framed photo cards, stacked --- */

.business__card {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0 20px 18px;
  border-width: 10px;
  border-radius: 14px;
}
.business__card:hover { transform: none; }
.business__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.business__tab {
  width: 158px;
  height: 34px;
  padding: 0 8px 8px 0;
  border-radius: 0 0 12px 0;
}
.business__tab-text { font-size: 24px; line-height: 24px; }
.business__name {
  height: auto;
  padding: 14px 46px 10px 0;
  border-radius: 0 12px 0 0;
}
.business__name-text { font-size: 19px; line-height: 20px; }
.business__notch {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 100%, transparent 11.4px, var(--green) 11.8px);
}
.business__notch--r  { left: 158px; top: 0; }
.business__notch--b  { left: 0; top: 34px; }
.business__notch--t  { left: 0; top: -12px; }
.business__notch--re { left: 100%; bottom: 0; }
.business__go {
  right: 10px;
  bottom: 10px;
  width: 48px;
  height: 48px;
}
.business__go-dot { width: 10px; height: 10px; }

/* ============================================================
   Culture
   ============================================================ */

.culture {
  height: auto;
  display: flex;
  flex-direction: column;
}
.culture__band  { order: 0; }
.culture__chars { order: 1; }
.culture__body  { order: 2; }

.culture__band {
  position: relative;
  width: 100%;
  height: 40px;
}
.culture__band-white { width: 62%; height: 40px; border-radius: 0 12px 0 0; }
.culture__band-notch {
  left: 62%;
  top: 28px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 0, transparent 11.4px, #fff 11.8px);
}

/* --- character + bubble --- */

.culture__chars {
  position: static;
  width: auto;
  height: auto;
  padding: 0 20px;
  margin: 18px 0 -6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.culture__bubble {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  padding: 9px 18px;
  font-size: 13px;
  line-height: 22px;
}
.culture__bubble-tail {
  right: 26px;
  top: 100%;
  margin-top: -2px;
  width: 18px;
  height: 15px;
}
.culture__chars-float { position: relative; left: auto; top: auto; }
.culture__chars-float img { width: 118px; height: auto; }

/* --- body: every block returns to flow --- */

.culture__body {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  padding: 48px 20px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
.culture__body > * { flex: 0 0 100%; }

/* corner accent above the heading — the body's own overflow crops it */
.culture__swoosh {
  left: auto;
  right: -76px;
  top: -38px;
  width: 230px;
  height: 116px;
  border-width: 20px;
  transform: rotate(-20deg);
  opacity: 0.55;
}

.culture__title {
  position: static;
  width: auto;
  height: auto;
  font-size: clamp(4.8rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.culture__sub-dot {
  position: static;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  margin: 10px 7px 0 0;
}
.culture__sub {
  position: static;
  flex: 0 0 auto;
  margin-top: 8px;
  font-size: 16px;
  line-height: 18px;
}

/* --- Values hero card --- */

.culture__card {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: 344px;
  margin-top: 26px;
  border-radius: 14px;
}
.culture__card::before { border-radius: 14px; }
.culture__card-swoosh {
  left: -150px;
  top: -130px;
  width: 660px;
  height: 580px;
  filter: blur(10px);
}
.culture__card-logo {
  left: 16px;
  top: 20px;
  font-size: clamp(2.4rem, 10vw, 4.4rem);
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.culture__card-logo .jp { font-size: 0.66em; }
.culture__more {
  left: 16px;
  top: 96px;
  width: 90px;
  height: 90px;
}
.culture__more-label {
  top: 27px;
  width: 90px;
  font-size: 13px;
  line-height: 13px;
}
.culture__more .btn-swap { left: 45px; top: 58px; }
.culture__more .btn-swap__arrow { width: 18px; height: 16px; }

.culture__sprite {
  left: 0;
  top: 202px;
  width: 100%;
  height: 132px;
}
.culture__sprite-row { gap: 22px; padding-right: 22px; }
.culture__sprite-row img { width: auto; height: 112px; }

/* --- Photo Library --- */

.culture__video {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: 210px;
  margin-top: 22px;
  border-width: 10px;
  border-radius: 14px;
}
.culture__video-inner {
  left: -18px;
  top: -14px;
  width: auto;
  gap: 8px;
  transform: rotate(-5deg);
}
.culture__video-row { gap: 8px; }
.culture__video-row--offset { margin-left: -62px; }
.culture__video-row img {
  width: 142px;
  height: 88px;
  border-radius: 6px;
}
.culture__video-tab {
  left: 0;
  top: 150px;
  width: 232px;
  height: 40px;
  padding: 8px 44px 4px 0;
  border-radius: 0 12px 0 0;
}
.culture__video-tabtext {
  font-size: 22px;
  line-height: 26px;
  white-space: nowrap;
}
.culture__video-notch1,
.culture__video-notch2 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 0, transparent 11.4px, var(--cyan) 11.8px);
}
.culture__video-notch1 { left: 0; top: -12px; }
.culture__video-notch2 { left: 232px; top: 28px; }
.culture__video-btn {
  right: 10px;
  bottom: 10px;
  width: 56px;
  height: 56px;
}

/* --- Values 3 cards --- */

.culture__rule {
  position: static;
  width: 100%;
  height: 1px;
  margin-top: 44px;
}
/* stays relative: the dot and the notch are absolutely placed against it */
.culture__tab {
  position: relative;
  flex: 0 0 auto;
  margin-right: auto;
  height: auto;
  padding: 6px 34px 6px 10px;
  border-radius: 0 0 12px 0;
}
.culture__tab-dot { left: 10px; top: 11px; }
.culture__tab-text { margin-left: 14px; font-size: 14px; line-height: 14px; }
.culture__tab-notch {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 100%, transparent 11.4px, var(--navy) 11.8px);
}

.culture__heading {
  position: static;
  margin-top: 22px;
  font-size: clamp(2.1rem, 8.4vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: 1px;
}

.culture__talks {
  position: static;
  width: 100%;
  margin-top: 22px;
  flex-direction: column;
  gap: 20px;
}
.culture__talks > li { width: 100%; }

.talk {
  width: 100%;
  height: auto;
  padding-bottom: 66px;
  border-radius: 14px;
}
/* the frame/title/body are <span>s that were block-level only because they
   were absolutely positioned — back in flow they must be blocks again */
.talk__frame {
  position: relative;
  display: block;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 427 / 290;
  border-width: 8px;
  border-radius: 14px;
}
.talk__badge {
  left: 8px;
  top: 8px;
  height: 48px;
  padding: 2px 24px 0 0;
  border-radius: 0 0 12px 0;
}
.talk__hash { margin-top: 3px; font-size: 16px; line-height: 16px; }
.talk__num { font-size: 46px; line-height: 46px; }
.talk__badge-notch1,
.talk__badge-notch2 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 100%, transparent 11.4px, var(--cyan) 11.8px);
}

.talk__title {
  position: relative;
  display: block;
  left: auto;
  top: auto;
  width: calc(100% - 48px);
  margin-top: -44px;
  padding: 12px 14px 4px;
  border-radius: 0 12px 0 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.4px;
}
.talk__title-notch1,
.talk__title-notch2 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle 12px at 100% 0, transparent 11.4px, var(--cyan) 11.8px);
}
.talk__title-notch1 { left: 100%; top: 32px; }
.talk__title-notch2 { left: 8px; top: -12px; }

.talk__body {
  position: relative;
  display: block;
  left: auto;
  top: auto;
  width: auto;
  margin: 10px 16px 0;
  font-size: 13px;
  line-height: 22px;
}
.talk__btn {
  right: 12px;
  bottom: 14px;
  width: 48px;
  height: 48px;
}

/* ============================================================
   Work
   ============================================================ */

.work {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding-bottom: 96px;
}
.work__band     { order: 0; }
.work__title    { order: 1; }
.work__sub-dot  { order: 2; }
.work__sub      { order: 3; }
.work__chars    { order: 4; }
.wcard          { order: 5; }

.work__band {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 40px;
}

/* the vertical wordmark lies down on mobile */
.work__title {
  position: static;
  flex: 0 0 100%;
  width: auto;
  padding: 32px 20px 0;
  writing-mode: horizontal-tb;
  font-size: clamp(4.8rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.work__sub-dot {
  position: static;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  margin: 11px 7px 0 20px;
}
.work__sub {
  position: static;
  flex: 0 0 auto;
  width: auto;
  margin-top: 8px;
  writing-mode: horizontal-tb;
  font-size: 16px;
  line-height: 18px;
}

/* only the crest of the arc clears the card grid, in the bottom padding */
.work__swoosh {
  left: auto;
  right: -120px;
  top: auto;
  bottom: -150px;
  width: 400px;
  height: 230px;
  border-width: 30px;
}

/* --- character + bubble --- */

.work__chars {
  position: static;
  flex: 0 0 100%;
  width: auto;
  height: auto;
  padding: 0 20px;
  margin: 22px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.work__bubble {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  padding: 9px 18px;
  font-size: 13px;
  line-height: 20px;
}
.work__bubble-tail {
  right: 26px;
  top: 100%;
  margin-top: -2px;
  width: 18px;
  height: 15px;
}
.work__chars-float { position: relative; left: auto; top: auto; }
.work__chars-float img { width: 104px; height: auto; }

/* --- 2x2 card grid --- */

.wcard {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 calc(50% - 30px);
  width: auto;
  height: auto;
  margin: 0 0 14px 20px;
}
.wcard__frame {
  position: relative;
  display: block;
  inset: auto;
  border-width: 6px;
  border-radius: 12px;
}
.wcard__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 305 / 406;
}
.wcard__tab {
  right: 6px;
  top: 6px;
  padding: 7px 9px 12px 14px;
  border-radius: 0 0 0 12px;
}
.wcard__tabtext {
  width: auto;
  font-size: 16px;
  line-height: 17px;
  letter-spacing: 0.5px;
}
.wcard__notch1,
.wcard__notch2 {
  width: 12px;
  height: 13px;
  background: radial-gradient(circle 12px at 0 100%, transparent 11.4px, var(--blue) 11.8px);
}
.wcard__notch1 { left: -12px; top: -1px; }
.wcard__notch2 { right: 0; top: 100%; margin-top: -1.5px; }
.wcard__btn {
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
}

}

@media (max-width: 767px) {
  /* 10文字の縦書きタブがカード高を超えないように */
  .wcard--4 .wcard__tabtext { font-size: 11.5px; line-height: 12.5px; letter-spacing: 0; }
  .wcard--4 .wcard__tab { padding: 6px 7px 10px 10px; }
}