/* Central CONTENTS section: editorial card on a warm yellow field. */
.mayoi-content-redesign {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 42px) clamp(16px, 4vw, 38px) clamp(72px, 10vw, 130px) !important;
  overflow: hidden;
  isolation: isolate;
  color: #2d2d2d;
  background: #eac745;
  border-top: 0;
}
.mayoi-content-redesign::before,
.mayoi-content-redesign::after { content: none; }
.mayoi-content-hash { position: absolute; z-index: 0; top: clamp(110px, 12vw, 160px); left: clamp(-74px, -10vw, -30px); display: block; width: clamp(150px, 52%, 244px); height: auto; opacity: .55; mix-blend-mode: soft-light; pointer-events: none; user-select: none; }
.mayoi-content-shell { position: relative; z-index: 1; width: min(100%, 650px); margin: 0 auto; }
.mayoi-content-heading { margin: 0 auto clamp(28px, 5vw, 52px); text-align: center; }
.mayoi-content-kicker { margin: 0 0 13px; color: #2d2d2d; font-size: .7rem; font-weight: 800; letter-spacing: .24em; }
.mayoi-content-heading h2 { margin: 0; line-height: 0; }
.mayoi-content-title-image { display: block; width: min(100%, 600px); height: auto; margin: 0 auto; }
.mayoi-content-bubbles { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 11px clamp(5px, 1vw, 10px); margin: 20px auto 24px; }
.mayoi-content-bubble { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.35em; padding: .5em .85em; border-radius: 999px; color: #2d2d2d; background: #fff; font-size: clamp(.72rem, 1.3vw, .95rem); font-weight: 700; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.mayoi-content-bubble::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 0; height: 0; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }
.mayoi-content-bubble:nth-child(1)::after { left: 62%; }
.mayoi-content-bubble:nth-child(2)::after { left: 50%; }
.mayoi-content-bubble:nth-child(3)::after { left: 38%; }
.mayoi-content-layout { position: relative; }
.mayoi-content-board {
  position: relative;
  margin-top: 0;
  padding: clamp(13px, 2.4vw, 24px);
  background: #fff;
  box-shadow: 8px 10px 0 rgba(45,45,45,.2);
  transform: none;
}
.mayoi-content-board::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(45,45,45,.24); pointer-events: none; }
.mayoi-redesign-tabs { position: relative; z-index: 3; top: auto; left: auto; right: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 78px; margin: 0 0 clamp(18px, 2.5vw, 26px); padding: 0; background: transparent; border-radius: 0; transform: none; }
.mayoi-redesign-tab { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding: 10px 7px 9px; border: 1.5px solid #2d2d2d; border-bottom: 0; border-radius: 20px 20px 0 0; color: #2d2d2d; background: #fff; font: inherit; text-align: center; cursor: pointer; transition: background .2s, color .2s; }
.mayoi-redesign-tab + .mayoi-redesign-tab { margin-left: -1px; }
.mayoi-redesign-tab span, .mayoi-redesign-tab strong { display: block; }
.mayoi-redesign-tab span { font-size: clamp(.78rem, 1.6vw, 1rem); font-weight: 800; line-height: 1.25; letter-spacing: .06em; }
.mayoi-redesign-tab strong { margin-top: 4px; font-size: clamp(.64rem, 1.35vw, .8rem); font-weight: 600; line-height: 1.25; letter-spacing: .05em; }
.mayoi-redesign-tab:hover { color: #e57523; }
.mayoi-redesign-tab.is-active { color: #fff; background: #e57523; border-color: #e57523; }
.mayoi-redesign-panels { position: relative; z-index: 2; }
.mayoi-redesign-panel { display: none; }
.mayoi-redesign-panel.is-active { display: block; }
.mayoi-content-video-frame { position: relative; width: 100%; max-width: 330px; margin-inline: auto; overflow: hidden; aspect-ratio: 9 / 16; background: #2d2d2d; border: 5px solid #2d2d2d; }
.mayoi-content-video-frame::after { content: "VIDEO"; position: absolute; top: 9px; left: 10px; padding: 4px 7px; color: #fff; background: #e57523; font-size: .6rem; font-weight: 800; letter-spacing: .18em; pointer-events: none; }
.mayoi-content-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mayoi-content-copy { min-height: 176px; padding: clamp(18px, 3vw, 30px) clamp(4px, 1.5vw, 15px) 5px; text-align: center; }
.mayoi-content-script { display: inline-block; margin: 0 0 8px; padding: .28em .85em; color: #fff; background: #e57523; border-radius: 999px; font-family: inherit; font-size: clamp(.72rem, 1.5vw, .95rem); font-weight: 700; letter-spacing: .08em; transform: none; }
.mayoi-collab-label,
.mayoi-collab-heading { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important; font-weight: 600 !important; }
.mayoi-content-copy h3 { margin: 0; font-size: clamp(1rem, 2.1vw, 1.45rem); font-weight: 800; letter-spacing: .08em; }
.mayoi-content-copy > p:last-child { max-width: 470px; margin: 13px auto 0; font-size: clamp(.76rem, 1.4vw, .92rem); line-height: 1.9; letter-spacing: .05em; }
.mayoi-content-copy small { display: block; margin-top: 5px; color: #777; font-size: .68em; }
.mayoi-content-side { position: absolute; z-index: 2; color: #fff; font-size: clamp(.78rem, 1.6vw, 1.1rem); font-weight: 900; letter-spacing: .25em; line-height: 1.05; writing-mode: vertical-rl; text-orientation: mixed; opacity: .92; }
.mayoi-content-side-left { top: 26%; left: -7.5%; transform: rotate(7deg); }
.mayoi-content-side-right { right: -7.5%; bottom: 15%; transform: rotate(-7deg); }

@media (max-width: 768px) {
  .mayoi-content-redesign { padding-top: 20px !important; }
  .mayoi-content-redesign::before { left: -29%; font-size: 4rem; }
  .mayoi-content-redesign::after { right: -29%; font-size: 4rem; }
  .mayoi-content-board { margin-top: 0; padding: 10px; box-shadow: 5px 7px 0 rgba(45,45,45,.18); }
  .mayoi-content-board::before { inset: 6px; }
  .mayoi-redesign-tabs { top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 70px; gap: 5px; padding: 0; border-radius: 0; }
  .mayoi-redesign-tab { min-height: 0; border-bottom: 1.5px solid #2d2d2d; border-radius: 14px 14px 0 0; }
  .mayoi-redesign-tab + .mayoi-redesign-tab { margin-left: 0; }
  .mayoi-redesign-tab.is-active { border-color: #e57523; }
  .mayoi-content-video-frame { width: 100%; aspect-ratio: 9 / 16; border-width: 4px; }
  .mayoi-content-copy { min-height: 206px; padding-top: 18px; }
  .mayoi-content-side { display: none; }
}

/* Shared TOP typography: keep the recommendation bubbles, tabs and copy
   legible when the central column becomes narrow. */
.mayoi-content-bubble,
.mayoi-redesign-tab span,
.mayoi-content-script {
  font-size: 16px !important;
  font-weight: 700 !important;
}
.mayoi-content-copy > p:last-child {
  font-size: 16px !important;
  font-weight: 400 !important;
}
.mayoi-content-copy small {
  font-size: 13px !important;
  font-weight: 400 !important;
}