@charset "UTF-8";

/* 中央カラム専用のデザイン。左右の固定カラムには影響しない。 */
.mayoi-central {
  color: #2d2d2d;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.mayoi-central * { box-sizing: border-box; }
.mayoi-hero,
.mayoi-section { width: min(88%, 760px); margin-inline: auto; }
.mayoi-hero { min-height: 720px; padding: 16vh 0 12vh; display: grid; align-content: center; text-align: center; }
.mayoi-eyebrow, .mayoi-kicker { color: #e57523; font-size: .76rem; font-weight: 700; letter-spacing: .28em; }
.mayoi-hero h1 { margin: 18px 0 24px; font-size: clamp(3.2rem, 7vw, 6.8rem); letter-spacing: .12em; font-weight: 800; line-height: 1; }
.mayoi-lead { font-size: clamp(1rem, 1.7vw, 1.4rem); line-height: 2; letter-spacing: .12em; font-weight: 600; }
.mayoi-slogan { display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); margin-top: 58px; font-size: clamp(1.15rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: .16em; }
.mayoi-slogan span { position: relative; }
.mayoi-slogan span + span::before { content: "・"; position: absolute; left: -1.15em; color: #e57523; }

/* TOP MV: 3つの枠からまよいが飛び出す、躍動感のあるコラージュ */
.mayoi-mv { position: relative; padding-top: 7vh; padding-bottom: 10vh; text-align: left; isolation: isolate; }
.mayoi-mv::before, .mayoi-mv::after { content: ""; position: absolute; z-index: -1; height: 8px; background: #e57523; transform: rotate(-14deg); opacity: .9; }
.mayoi-mv::before { width: 42%; top: 36%; left: -12%; }.mayoi-mv::after { width: 34%; top: 70%; right: -10%; transform: rotate(13deg); }
.mayoi-mv > .mayoi-eyebrow, .mayoi-mv > .mayoi-lead { position: relative; z-index: 2; text-align: center; }
.mayoi-mv-wordmark { position: relative; z-index: 0; margin: 0 -14% -2%; color: #fff; font-size: clamp(4.5rem, 11vw, 10rem); font-weight: 900; line-height: .98; letter-spacing: .08em; white-space: nowrap; text-align: center; -webkit-text-stroke: clamp(2px, .45vw, 7px) #2d2d2d; paint-order: stroke fill; transform: rotate(-2deg); text-shadow: 8px 8px 0 rgba(229,117,35,.18); }
.mayoi-mv-panels { position: relative; z-index: 1; display: grid; gap: 18px; margin: 42px 0 0; padding: 0 7%; }
.mayoi-mv-card { position: relative; overflow: visible; margin: 0; border: 3px solid #2d2d2d; background: #fff; box-shadow: 10px 10px 0 #fff1e7; transform: rotate(-2deg); }
.mayoi-mv-card::after { content: ""; position: absolute; inset: -10px; z-index: -1; border: 2px solid #e57523; pointer-events: none; }
.mayoi-mv-card:nth-child(2) { margin-left: 13%; transform: rotate(2.5deg); }.mayoi-mv-card:nth-child(3) { margin-left: 3%; transform: rotate(-1deg); }
.mayoi-mv-card img { display: block; width: 100%; height: 235px; object-fit: cover; object-position: center 30%; filter: saturate(.88) contrast(1.05); }
.mayoi-mv-card-cook img { object-position: 62% 34%; }.mayoi-mv-card-eat img { object-position: 50% 36%; }.mayoi-mv-card-energy img { object-position: 50% 38%; }
.mayoi-mv-label { position: absolute; z-index: 3; top: 14px; left: -20px; padding: 8px 17px; color: #fff; background: #e57523; font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: .12em; line-height: 1.1; box-shadow: 5px 5px 0 #2d2d2d; transform: rotate(-3deg); }
.mayoi-mv-card-eat .mayoi-mv-label { left: auto; right: -22px; transform: rotate(3deg); }.mayoi-mv-card-energy .mayoi-mv-label { top: auto; bottom: 14px; left: -24px; transform: rotate(-2deg); }
.mayoi-mv-card-energy img { height: 260px; }.mayoi-mv-card-energy { margin-bottom: 18px; }
.mayoi-mv-card-cook::before, .mayoi-mv-card-eat::before, .mayoi-mv-card-energy::before { content: "✦"; position: absolute; z-index: 4; color: #e57523; font-size: 2rem; }
.mayoi-mv-card-cook::before { right: -28px; bottom: -25px; }.mayoi-mv-card-eat::before { left: -34px; top: 25%; }.mayoi-mv-card-energy::before { right: -28px; top: -28px; }
.mayoi-section { padding: 100px 0; border-top: 1px solid #2d2d2d; }
.mayoi-section h2 { margin: 20px 0 24px; font-size: clamp(2rem, 3.8vw, 3.8rem); font-weight: 800; letter-spacing: .08em; }
.mayoi-guide { padding-bottom: 160px; }
.mayoi-guide-links { display: grid; gap: 14px; margin-top: 38px; }
.mayoi-guide-links a { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; color: #2d2d2d; border: 1px solid #e57523; font-size: 1rem; font-weight: 700; letter-spacing: .1em; transition: color .25s, background .25s; }
.mayoi-guide-links a span { color: #e57523; font-size: 1.3em; transition: transform .25s; }
.mayoi-guide-links a:hover { color: #fff; background: #e57523; }
.mayoi-guide-links a:hover span { color: #fff; transform: translateX(5px); }

/* 下層ページ */
.mayoi-page-hero { padding-top: 16vh; padding-bottom: 90px; }
.mayoi-page-hero h1 { max-width: 720px; margin-top: 22px; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.35; letter-spacing: .08em; }
.mayoi-page-hero .mayoi-copy { max-width: 650px; margin-top: 28px; }
.mayoi-profile-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mayoi-profile-card article, .mayoi-info-card, .mayoi-flow-card { padding: 28px; border: 1px solid #2d2d2d; }
.mayoi-profile-card h3, .mayoi-info-card h3 { margin-bottom: 16px; color: #e57523; font-size: 1.35rem; letter-spacing: .08em; }
.mayoi-profile-card p, .mayoi-info-card p, .mayoi-flow-card p { font-size: .95rem; line-height: 2; letter-spacing: .04em; }
.mayoi-diary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mayoi-diary-card { margin: 0; padding: 10px; background: #fff; border: 1px solid #2d2d2d; box-shadow: 6px 6px 0 #fff1e7; transform: rotate(-1deg); }
.mayoi-diary-card:nth-child(2) { transform: rotate(1.2deg); }.mayoi-diary-card:nth-child(3) { transform: rotate(.6deg); }.mayoi-diary-card:nth-child(4) { transform: rotate(-1.4deg); }
.mayoi-diary-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mayoi-diary-card figcaption { padding: 12px 4px 4px; font-size: .78rem; letter-spacing: .08em; }
.mayoi-link-list { display: grid; gap: 12px; margin-top: 26px; }.mayoi-link-list a { color: #2d2d2d; border-bottom: 1px solid #e57523; padding: 12px 0; font-weight: 700; }.mayoi-link-list a:hover { color: #e57523; }
.mayoi-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.mayoi-info-card { height: 100%; }.mayoi-info-card h3 { font-size: 1.05rem; }.mayoi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }.mayoi-stat { padding: 18px 12px; background: #fff8f3; text-align: center; }.mayoi-stat b { display: block; font-size: 1.2rem; color: #e57523; }.mayoi-stat span { display: block; margin-top: 6px; font-size: .75rem; letter-spacing: .08em; }
.mayoi-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.mayoi-flow-card { padding: 18px 14px; }.mayoi-flow-card b { display: block; color: #e57523; font-size: .78rem; letter-spacing: .08em; }.mayoi-flow-card h3 { margin: 8px 0 12px; font-size: 1rem; letter-spacing: .06em; }.mayoi-flow-card p { font-size: .78rem; line-height: 1.8; }
.mayoi-cta { margin-top: 34px; display: inline-flex; align-items: center; gap: 18px; padding: 18px 25px; color: #fff; background: #e57523; font-weight: 700; letter-spacing: .08em; }.mayoi-cta:hover { color: #2d2d2d; background: #fff1e7; }

@media (min-width: 769px) { .mayoi-central { min-height: 100vh; }.mayoi-section, .mayoi-page-hero { padding-left: 4vw; padding-right: 4vw; }.mayoi-section { width: 100%; }.mayoi-hero { width: 100%; }.mayoi-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 768px) { .mayoi-hero { min-height: 640px; padding-top: 150px; }.mayoi-slogan { flex-direction: column; gap: 8px; }.mayoi-slogan span + span::before { content: ""; }.mayoi-section { padding: 70px 0; }.mayoi-profile-card, .mayoi-card-grid { grid-template-columns: 1fr; }.mayoi-diary-grid { gap: 12px; }.mayoi-flow { grid-template-columns: 1fr; }.mayoi-stats { grid-template-columns: 1fr; }.mayoi-guide { padding-bottom: 100px; }.mayoi-mv { padding-top: 130px; }.mayoi-mv-wordmark { margin-inline: -12%; font-size: clamp(3.5rem, 17vw, 6rem); -webkit-text-stroke: 2px #2d2d2d; }.mayoi-mv-panels { gap: 13px; padding: 0 4%; margin-top: 30px; }.mayoi-mv-card img { height: 180px; }.mayoi-mv-card-energy img { height: 205px; }.mayoi-mv-card:nth-child(2) { margin-left: 9%; }.mayoi-mv-label { left: -11px; top: 9px; padding: 6px 10px; font-size: 1rem; box-shadow: 3px 3px 0 #2d2d2d; }.mayoi-mv-card-eat .mayoi-mv-label { right: -11px; }.mayoi-mv-card-energy .mayoi-mv-label { left: -13px; bottom: 9px; } }

/* MV compact comic layout: first view only */
.mayoi-mv { height: 100vh; min-height: 0; padding: 9vh 4% 2.5vh; overflow: hidden; }
.mayoi-mv-wordmark { margin: 0 auto -1%; width: min(92%, 560px); transform: rotate(-2deg); }
.mayoi-mv-wordmark img { display: block; width: 100%; height: auto; }
.mayoi-mv > .mayoi-lead { margin: 5px 0 0; font-size: clamp(.72rem, 1.2vw, .95rem); line-height: 1.45; letter-spacing: .13em; }
.mayoi-mv-panels { height: calc(100% - 184px); max-height: 610px; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr 1fr; gap: 12px; margin: 15px 2% 0; padding: 0; }
.mayoi-mv-card { min-height: 0; border-width: 2px; box-shadow: 6px 6px 0 #fff1e7; transform: rotate(-1.2deg); }
.mayoi-mv-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.mayoi-mv-card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; margin: 10% 0 0 0; transform: rotate(1.8deg); }
.mayoi-mv-card:nth-child(3) { grid-column: 1; grid-row: 2; margin: -4% 0 0 3%; transform: rotate(-1deg); }
.mayoi-mv-card img, .mayoi-mv-card-energy img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.mayoi-mv-card-cook img { filter: grayscale(.8) sepia(.12) saturate(.75) contrast(1.04); object-position: 64% 30%; }
.mayoi-mv-card-eat img { filter: grayscale(.38) sepia(.07) saturate(.72) contrast(1.02); object-position: 50% 35%; }
.mayoi-mv-card-energy img { filter: grayscale(.2) sepia(.04) saturate(.74) contrast(1.02); object-position: 50% 25%; }
.mayoi-mv-card::after { inset: -6px; border-width: 1px; }
.mayoi-mv-label { top: 9px; left: -12px; padding: 5px 11px; font-size: clamp(.8rem, 1.7vw, 1.15rem); box-shadow: 3px 3px 0 #2d2d2d; }
.mayoi-mv-card-eat .mayoi-mv-label { right: -13px; }.mayoi-mv-card-energy .mayoi-mv-label { left: -13px; bottom: 8px; top: auto; }
.mayoi-mv-card-cook::before, .mayoi-mv-card-eat::before, .mayoi-mv-card-energy::before { font-size: 1.25rem; }.mayoi-mv-card-cook::before { right: -19px; bottom: -19px; }.mayoi-mv-card-eat::before { left: -21px; top: 22%; }.mayoi-mv-card-energy::before { right: -19px; top: -20px; }

@media (max-width: 768px) {
  .mayoi-mv { height: 100svh; min-height: 600px; padding: 112px 15px 14px; }
  .mayoi-mv-wordmark { width: 92%; margin-bottom: 0; }
  .mayoi-mv > .mayoi-lead { margin-top: 4px; font-size: .72rem; }
  .mayoi-mv-panels { height: calc(100% - 165px); max-height: none; margin-top: 12px; gap: 8px; }
  .mayoi-mv-card { box-shadow: 4px 4px 0 #fff1e7; }
  .mayoi-mv-card::after { inset: -4px; }
  .mayoi-mv-label { font-size: .72rem; padding: 5px 8px; left: -8px; top: 6px; box-shadow: 2px 2px 0 #2d2d2d; }
  .mayoi-mv-card-eat .mayoi-mv-label { right: -8px; }.mayoi-mv-card-energy .mayoi-mv-label { left: -8px; bottom: 6px; }
}

/* Fan and creator page title art.  The supplied artwork carries the display
   lettering, so the old text-only hero is intentionally omitted. */
.mayoi-fan-hero,
.creator-title-hero {
  min-height: 0;
  display: block;
  padding: clamp(24px, 5vw, 54px) 0 clamp(38px, 7vw, 78px);
  background: #f0f0f2;
  text-align: center;
}
.fan-title-art,
.creator-title-art {
  width: min(100%, 760px);
  margin: 0 auto;
}
.fan-title-art img,
.creator-title-art img {
  display: block;
  width: 100%;
  height: auto;
}
.mayoi-fan-hero .fan-title-lead {
  width: min(92%, 650px);
  margin: clamp(18px, 3vw, 30px) auto 0;
  color: #2d2d2d;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .05em;
  text-align: center;
}
.mayoi-profile-section {
  background-color: #f0f0f2 !important;
}
.mayoi-profile-intro {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mayoi-profile-intro > div {
  text-align: center;
}
.mayoi-profile-intro-note {
  margin-inline: auto !important;
  text-align: center !important;
}
.creator-title-hero {
  background: #fff;
}

/* A vertical process diagram keeps the flow readable on both desktop and SP.
   Each circle uses a Mayoi cooking/character image rather than a generic icon. */
.pr-page .mayoi-flow-visual {
  position: relative;
  display: grid;
  gap: 26px;
  width: min(100%, 760px);
  margin: 0 auto;
}
.pr-page .mayoi-flow-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 59px;
  top: 70px;
  bottom: 70px;
  width: 2px;
  background: #e57523;
}
.pr-page .mayoi-flow-visual .mayoi-flow-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 132px;
  padding: 10px 20px 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pr-page .mayoi-flow-visual .mayoi-flow-card:not(:last-child)::after {
  content: "↓";
  position: absolute;
  z-index: 2;
  left: 47px;
  bottom: -26px;
  color: #e57523;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.pr-page .mayoi-flow-icon {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid #2d2d2d;
  border-radius: 50%;
  background: #fff;
  box-shadow: 7px 7px 0 rgba(234,199,69,.55);
}
.pr-page .mayoi-flow-card:nth-child(even) .mayoi-flow-icon {
  box-shadow: 7px 7px 0 rgba(229,117,35,.32);
}
.pr-page .mayoi-flow-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}
.pr-page .mayoi-flow-card:nth-child(2) .mayoi-flow-icon img,
.pr-page .mayoi-flow-card:nth-child(4) .mayoi-flow-icon img {
  object-position: center 18%;
}
.pr-page .mayoi-flow-copy {
  min-width: 0;
}
.pr-page .mayoi-flow-copy b {
  display: block;
  color: #e57523;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}
.pr-page .mayoi-flow-copy h3 {
  margin: 7px 0 8px;
  color: #2d2d2d;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.pr-page .mayoi-flow-copy p {
  margin: 0;
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

/* The closing mascot is intentionally smaller and rests over the card's top
   edge, leaving only the arms/desk overlap visible in the white panel. */
.pr-page .pr-contact-mini-wrap {
  width: clamp(125px, 17vw, 190px);
  height: auto;
  bottom: calc(100% - 24px);
}
.pr-page .pr-contact-mini {
  content: url("../img/mayoi/guide/mayoi-guide-contact-v3.png");
  mix-blend-mode: normal;
}

/* Common button type and arrow treatment.  All action buttons use the same
   18px bold label and the filled orange/white arrow artwork. */
.mayoi-guide-links a,
.creator-link-card,
.pr-page .mayoi-cta.pr-cta,
.mayoi-guide-links a .mayoi-guide-link-text,
.creator-link-copy b {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.mayoi-guide-links a .cta-arrow-icon,
.creator-link-arrow .cta-arrow-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
/* Higher-specificity companion rules keep the 18px button labels from being
   reduced by the shared SP type scale later in this stylesheet. */
body#mayoi .mayoi-central .mayoi-guide-links a,
body#mayoi .mayoi-central .creator-link-card,
body#mayoi .mayoi-central .mayoi-cta,
body#mayoi .mayoi-central .pr-cta,
body#mayoi .mayoi-central .mayoi-guide-links a .mayoi-guide-link-text,
body#mayoi .mayoi-central .creator-link-copy b {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.pr-page .pr-cta-arrow::after {
  background-image: url("../img/common/arrow-circle.svg");
}

@media (max-width: 768px) {
  .mayoi-fan-hero,
  .creator-title-hero {
    padding: 24px 0 40px;
  }
  .mayoi-fan-hero .fan-title-lead {
    font-size: 18px !important;
  }
  .mayoi-profile-intro {
    align-items: center;
    flex-direction: column;
    gap: 12px;
  }
  .mayoi-profile-intro-note {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pr-page .mayoi-flow-visual {
    gap: 22px;
  }
  .pr-page .mayoi-flow-visual::before {
    left: 43px;
    top: 52px;
    bottom: 52px;
  }
  .pr-page .mayoi-flow-visual .mayoi-flow-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    min-height: 98px;
    padding-right: 0;
  }
  .pr-page .mayoi-flow-visual .mayoi-flow-card:not(:last-child)::after {
    left: 32px;
    bottom: -23px;
    font-size: 26px;
  }
  .pr-page .mayoi-flow-icon {
    width: 88px;
    height: 88px;
    box-shadow: 5px 5px 0 rgba(234,199,69,.55);
  }
  .pr-page .mayoi-flow-card:nth-child(even) .mayoi-flow-icon {
    box-shadow: 5px 5px 0 rgba(229,117,35,.32);
  }
  .pr-page .mayoi-flow-copy h3 {
    font-size: 20px !important;
  }
  .pr-page .mayoi-flow-copy p {
    font-size: 16px !important;
  }
  .pr-page .pr-contact-mini-wrap {
    width: 125px;
    bottom: calc(100% - 18px);
  }
}

/* TOP guide button labels: keep the three lower-page links readable on every viewport. */
body#mayoi.top-page .mayoi-central .mayoi-guide-links a .mayoi-guide-link-text {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Fan page alignment: the supplied title artwork fills the central column,
   while the profile heading follows the same title/lead scale as other pages. */
body#mayoi .mayoi-central .mayoi-fan-hero {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
body#mayoi .mayoi-central .mayoi-fan-hero .fan-title-art {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body#mayoi .mayoi-central .mayoi-fan-hero .fan-title-art img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  margin: 0 !important;
}
body#mayoi .mayoi-central .mayoi-profile-intro {
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: center !important;
}
body#mayoi .mayoi-central .mayoi-profile-intro h2 {
  margin: 0 !important;
  /* Match the creator page's 制作環境 heading scale. */
  font-size: clamp(1.35rem, 3.1vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
}
body#mayoi .mayoi-central .mayoi-profile-intro-note {
  margin: 0 auto !important;
  /* Match the creator page's 制作環境 lead text scale. */
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  letter-spacing: .05em !important;
  text-align: center !important;
}
@media (max-width: 768px) {
  /* The fixed mobile header occupies the first 82px; the artwork starts
     immediately below it without an additional visual margin. */
  body#mayoi .mayoi-central .mayoi-fan-hero {
    padding-top: 82px !important;
  }
  body#mayoi .mayoi-central .mayoi-profile-intro h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
  }
  body#mayoi .mayoi-central .mayoi-profile-intro-note {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
  }
}

/* Keep action labels at the requested 18px scale even when the mobile
   hierarchy uses a smaller base size. */
.mayoi-central .mayoi-guide-links a .mayoi-guide-link-text,
.mayoi-central .creator-link-copy b,
.mayoi-central .mayoi-guide-links a,
.mayoi-central .creator-link-card,
.mayoi-central .mayoi-cta,
.mayoi-central .pr-cta {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.mayoi-central .creator-link-copy b,
.mayoi-central .mayoi-guide-links a .mayoi-guide-link-text {
  line-height: 1.25;
}

/* 添付の前回MVへ戻し、袋文字だけをロゴで置き換え */
.mayoi-mv-final { width: 100%; height: 100vh; min-height: 0; padding: 0; overflow: hidden; background: #fff; }
.mayoi-mv-final::before, .mayoi-mv-final::after { display: none; }
.mayoi-mv-final-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.mayoi-mv-final-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mayoi-mv-corner-logo { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 23%; padding: 4% 0 0 5%; background: #fff; }
.mayoi-mv-corner-logo img { display: block; width: clamp(90px, 25%, 220px); height: auto; }
@media (max-width: 768px) {
  .mayoi-mv-final { height: calc(100svh - 82px); min-height: 540px; }
  .mayoi-mv-corner-logo { height: 22%; padding: 4% 0 0 5%; }
  .mayoi-mv-corner-logo img { width: 29%; min-width: 84px; }
}

/* 前回の統一イラストMVをそのまま表示 */
.mayoi-mv-final { width: 100%; height: 100vh; min-height: 0; padding: 0; overflow: hidden; background: #fff; }
.mayoi-mv-final::before, .mayoi-mv-final::after { display: none; }
.mayoi-mv-final > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
@media (max-width: 768px) { .mayoi-mv-final { height: calc(100svh - 82px); min-height: 540px; }.mayoi-mv-final > img { width: 100%; height: 100%; object-fit: contain; } }

/* MV composition final: header copy + two left panels + full-body right panel */
.mayoi-mv-composed { width: 100%; height: 100vh; min-height: 720px; padding: 4vh 2.5% 1.5vh; overflow: hidden; background: #fff; text-align: left; }
.mayoi-mv-composed::before, .mayoi-mv-composed::after { display: none; }
.mayoi-mv-composed .mayoi-mv-heading { position: relative; height: 27%; min-height: 175px; }
.mayoi-mv-composed .mayoi-mv-welcome { margin: 0 0 3px 4%; font-size: clamp(1.05rem, 2.15vw, 2rem); font-weight: 800; letter-spacing: .06em; line-height: 1.1; transform: rotate(-6deg); transform-origin: left center; }
.mayoi-mv-composed .mayoi-mv-logo-box { width: 70%; margin-left: 2%; padding: 8px 16px 3px; border: 1px solid #2d2d2d; transform: rotate(-4deg); background: #fff; }
.mayoi-mv-composed .mayoi-mv-logo-box img { display: block; width: 100%; height: auto; }
.mayoi-mv-composed .mayoi-mv-to { position: absolute; right: 1%; bottom: 11%; margin: 0; font-size: clamp(1rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: .06em; transform: rotate(5deg); }
.mayoi-mv-composed .mayoi-mv-comic { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10px; height: 70%; min-height: 0; }
.mayoi-mv-composed .mayoi-mv-left-panels { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.mayoi-mv-composed .mayoi-mv-scene { position: relative; min-height: 0; margin: 0; overflow: hidden; border: 1px solid #2d2d2d; background: #fff; }
.mayoi-mv-composed .mayoi-mv-scene::before { content: ""; position: absolute; z-index: 2; inset: 6px; border: 1px solid rgba(45,45,45,.38); pointer-events: none; }
.mayoi-mv-composed .mayoi-mv-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mayoi-mv-composed .mayoi-mv-scene-cook { transform: rotate(-1.6deg); }.mayoi-mv-composed .mayoi-mv-scene-cook img { object-position: 64% 30%; filter: grayscale(.7) sepia(.08) saturate(.72); }
.mayoi-mv-composed .mayoi-mv-scene-eat { transform: rotate(1.2deg); }.mayoi-mv-composed .mayoi-mv-scene-eat img { object-position: 50% 34%; filter: grayscale(.28) sepia(.05) saturate(.78); }
.mayoi-mv-composed .mayoi-mv-scene-energy { transform: rotate(1deg); overflow: hidden; }.mayoi-mv-composed .mayoi-mv-scene-energy img { object-fit: contain; object-position: center bottom; filter: saturate(.88) contrast(1.02); }
.mayoi-mv-composed .mayoi-mv-scene span { position: absolute; z-index: 4; left: -6px; top: 9px; padding: 6px 11px; color: #fff; background: #e57523; font-size: clamp(.8rem, 1.5vw, 1.25rem); font-weight: 800; letter-spacing: .08em; line-height: 1; box-shadow: 3px 3px 0 #2d2d2d; transform: rotate(-3deg); }
.mayoi-mv-composed .mayoi-mv-scene-eat span { left: auto; right: -6px; transform: rotate(3deg); }.mayoi-mv-composed .mayoi-mv-scene-energy span { left: 4%; right: 4%; top: auto; bottom: 3%; text-align: center; font-size: clamp(1.05rem, 2.2vw, 1.9rem); transform: rotate(-2deg); }
@media (max-width: 768px) {
  .mayoi-mv-composed { height: calc(100svh - 82px); min-height: 610px; padding: 100px 10px 10px; }
  .mayoi-mv-composed .mayoi-mv-heading { height: 26%; min-height: 145px; }.mayoi-mv-composed .mayoi-mv-welcome { font-size: .86rem; }.mayoi-mv-composed .mayoi-mv-logo-box { width: 72%; padding: 5px 8px 2px; }.mayoi-mv-composed .mayoi-mv-to { font-size: .78rem; bottom: 9%; }
  .mayoi-mv-composed .mayoi-mv-comic { height: 71%; gap: 6px; }.mayoi-mv-composed .mayoi-mv-left-panels { gap: 6px; }.mayoi-mv-composed .mayoi-mv-scene::before { inset: 4px; }.mayoi-mv-composed .mayoi-mv-scene span { left: -4px; top: 5px; padding: 5px 7px; font-size: .62rem; box-shadow: 2px 2px 0 #2d2d2d; }.mayoi-mv-composed .mayoi-mv-scene-eat span { right: -4px; }.mayoi-mv-composed .mayoi-mv-scene-energy span { left: 3%; right: 3%; bottom: 3%; font-size: .78rem; }
}

/* 最終表示調整：上部の余白を詰めてイラストをロゴ直下から表示 */
.mayoi-mv-final-art { object-fit: cover; object-position: center bottom; }
.mayoi-mv-corner-logo { height: 20%; }
@media (max-width: 768px) {
  .mayoi-mv-final-art { position: absolute; left: 50%; bottom: 0; width: auto; height: 121%; max-width: none; object-fit: cover; transform: translateX(-50%); }
  .mayoi-mv-corner-logo { height: 20%; }
}

/* 採用MV画像 */
.mayoi-mv-final { width: 100%; min-height: 0; height: 100vh; padding: 0; display: block; overflow: hidden; background: #fff; }
.mayoi-mv-final > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
@media (max-width: 768px) {
  .mayoi-mv-final { height: auto; min-height: 0; padding: 82px 0 0; }
  .mayoi-mv-final > img { width: 100%; height: auto; object-fit: contain; }
}

/* MVタイトルを指定ロゴに差し替え、上部を少し見切れさせる */
.mayoi-mv-final { height: 100vh; padding: 0; overflow: hidden; }
.mayoi-mv-final-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.mayoi-mv-final-art { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center bottom; }
.mayoi-mv-logo-veil { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 25%; overflow: hidden; background: #fff; }
.mayoi-mv-logo-veil img { position: absolute; left: 50%; top: -16%; width: 98%; height: auto; transform: translateX(-50%); }
@media (max-width: 768px) {
  .mayoi-mv-final { height: calc(100svh - 82px); min-height: 540px; padding: 0; }
  .mayoi-mv-final-art { width: 100%; height: 100%; object-fit: contain; }
  .mayoi-mv-logo-veil { height: 24%; }
  .mayoi-mv-logo-veil img { top: -14%; width: 103%; }
}

/* 新MVレイアウト：左に2コマ、右に全身のジャンプカット */
.mayoi-mv-composed { width: 100%; height: 100vh; min-height: 760px; padding: 4.5vh 3% 2vh; overflow: hidden; text-align: left; background: #fff; }
.mayoi-mv-composed::before, .mayoi-mv-composed::after { display: none; }
.mayoi-mv-heading { position: relative; height: 25%; min-height: 170px; }
.mayoi-mv-welcome { margin: 0 0 3px 3%; font-size: clamp(1.2rem, 2.2vw, 2.2rem); font-weight: 800; letter-spacing: .08em; line-height: 1.1; transform: rotate(-6deg); transform-origin: left center; }
.mayoi-mv-logo-box { width: 71%; margin-left: 2%; padding: 8px 18px 4px; border: 1.5px solid #2d2d2d; transform: rotate(-4deg); background: #fff; }
.mayoi-mv-logo-box img { display: block; width: 100%; height: auto; }
.mayoi-mv-to { position: absolute; right: 1%; bottom: 12%; margin: 0; font-size: clamp(1.15rem, 2.1vw, 2rem); font-weight: 800; letter-spacing: .08em; transform: rotate(5deg); }
.mayoi-mv-comic { display: grid; grid-template-columns: .86fr 1.14fr; gap: 12px; height: 73%; min-height: 0; }
.mayoi-mv-left-panels { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }
.mayoi-mv-scene { position: relative; min-height: 0; margin: 0; overflow: hidden; border: 1.5px solid #2d2d2d; background: #fff; }
.mayoi-mv-scene::before { content: ""; position: absolute; z-index: 2; inset: 7px; border: 1px solid rgba(45,45,45,.45); pointer-events: none; }
.mayoi-mv-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mayoi-mv-scene-cook { transform: rotate(-2deg); }.mayoi-mv-scene-cook img { filter: grayscale(.72) sepia(.08) saturate(.7); object-position: 63% 32%; }
.mayoi-mv-scene-eat { transform: rotate(1.5deg); }.mayoi-mv-scene-eat img { filter: grayscale(.38) sepia(.08) saturate(.72); object-position: 50% 34%; }
.mayoi-mv-scene-energy { transform: rotate(1.2deg); overflow: visible; background: #fff; }.mayoi-mv-scene-energy img { object-fit: contain; object-position: center bottom; filter: saturate(.86) contrast(1.02); }
.mayoi-mv-scene span { position: absolute; z-index: 4; left: -7px; top: 10px; padding: 7px 13px; color: #fff; background: #e57523; font-size: clamp(.9rem, 1.7vw, 1.45rem); font-weight: 800; letter-spacing: .1em; line-height: 1; box-shadow: 3px 3px 0 #2d2d2d; transform: rotate(-3deg); }
.mayoi-mv-scene-eat span { left: auto; right: -8px; transform: rotate(3deg); }.mayoi-mv-scene-energy span { left: 4%; right: 4%; top: auto; bottom: 3%; text-align: center; font-size: clamp(1.15rem, 2.4vw, 2rem); transform: rotate(-2deg); }

@media (max-width: 768px) {
  .mayoi-mv-composed { height: calc(100svh - 82px); min-height: 600px; padding: 100px 12px 12px; }
  .mayoi-mv-heading { height: 25%; min-height: 130px; }.mayoi-mv-welcome { font-size: 1rem; margin-left: 3%; }.mayoi-mv-logo-box { width: 73%; padding: 5px 10px 2px; }.mayoi-mv-to { right: 0; bottom: 9%; font-size: .95rem; }
  .mayoi-mv-comic { height: 72%; gap: 7px; }.mayoi-mv-left-panels { gap: 7px; }.mayoi-mv-scene::before { inset: 4px; }.mayoi-mv-scene span { left: -4px; top: 6px; padding: 5px 7px; font-size: .67rem; box-shadow: 2px 2px 0 #2d2d2d; }.mayoi-mv-scene-eat span { right: -4px; }.mayoi-mv-scene-energy span { left: 3%; right: 3%; bottom: 3%; font-size: .84rem; }
}

/* MV rollback: ひとつ前の縦並びレイアウト */
.mayoi-mv { height: auto; min-height: 720px; padding: 7vh 0 10vh; overflow: visible; text-align: left; }
.mayoi-mv-wordmark { margin: 0 -14% -2%; width: auto; color: #fff; font-size: clamp(4.5rem, 11vw, 10rem); font-weight: 900; line-height: .98; letter-spacing: .08em; white-space: nowrap; text-align: center; -webkit-text-stroke: clamp(2px, .45vw, 7px) #2d2d2d; paint-order: stroke fill; transform: rotate(-2deg); text-shadow: 8px 8px 0 rgba(229,117,35,.18); }
.mayoi-mv-wordmark img { display: none; }
.mayoi-mv-panels { height: auto; max-height: none; display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; margin: 42px 0 0; padding: 0 7%; }
.mayoi-mv-card { min-height: 0; border-width: 3px; box-shadow: 10px 10px 0 #fff1e7; transform: rotate(-2deg); }
.mayoi-mv-card:nth-child(1), .mayoi-mv-card:nth-child(2), .mayoi-mv-card:nth-child(3) { grid-column: auto; grid-row: auto; }
.mayoi-mv-card:nth-child(2) { margin-left: 13%; transform: rotate(2.5deg); }.mayoi-mv-card:nth-child(3) { margin-left: 3%; transform: rotate(-1deg); }
.mayoi-mv-card img { height: 235px; min-height: 0; object-fit: cover; }
.mayoi-mv-card-energy img { height: 260px; }.mayoi-mv-card-energy { margin-bottom: 18px; }
.mayoi-mv-card::after { inset: -10px; border-width: 2px; }
.mayoi-mv-label { top: 14px; left: -20px; padding: 8px 17px; font-size: clamp(1.1rem, 2.4vw, 1.8rem); box-shadow: 5px 5px 0 #2d2d2d; }
.mayoi-mv-card-eat .mayoi-mv-label { left: auto; right: -22px; }.mayoi-mv-card-energy .mayoi-mv-label { top: auto; bottom: 14px; left: -24px; }
@media (max-width: 768px) {
  .mayoi-mv { height: auto; min-height: 640px; padding: 130px 0 10vh; }
  .mayoi-mv-wordmark { margin-inline: -12%; width: auto; font-size: clamp(3.5rem, 17vw, 6rem); -webkit-text-stroke: 2px #2d2d2d; }
  .mayoi-mv-panels { height: auto; gap: 13px; padding: 0 4%; margin-top: 30px; }
  .mayoi-mv-card img { height: 180px; }.mayoi-mv-card-energy img { height: 205px; }
  .mayoi-mv-card:nth-child(2) { margin-left: 9%; }.mayoi-mv-label { left: -11px; top: 9px; padding: 6px 10px; font-size: 1rem; box-shadow: 3px 3px 0 #2d2d2d; }
  .mayoi-mv-card-eat .mayoi-mv-label { right: -11px; }.mayoi-mv-card-energy .mayoi-mv-label { left: -13px; bottom: 9px; }
}

/* Guide redesign: large pointing character + rounded destination cards */
.mayoi-guide {
  position: relative;
  padding: clamp(68px, 8vw, 108px) clamp(18px, 4vw, 42px) clamp(104px, 12vw, 170px);
  overflow: visible;
  background-color: #fff;
  background-image: url("../img/mayoi/contents_bk_01.jpg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 0;
}
.mayoi-guide-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: clamp(14px, 3vw, 38px);
  max-width: 920px;
  margin: 0 auto;
}
.mayoi-guide-visual {
  position: relative;
  min-height: clamp(310px, 34vw, 430px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  /* 黄色い CONTENTS 面と白いガイド面をまたぐ位置まで引き上げる */
  transform: translateY(calc(-1 * clamp(190px, 24vw, 230px)));
}
.mayoi-guide-visual::before {
  content: none;
  position: absolute;
  z-index: -1;
  left: 12%;
  right: 3%;
  bottom: 7%;
  height: 54%;
  border-radius: 52% 48% 40% 60%;
  background: #fff7df;
  transform: rotate(-8deg);
}
.mayoi-guide-visual-label {
  position: absolute;
  z-index: 0;
  top: 3%;
  left: 4%;
  color: #e57523;
  font-size: clamp(.58rem, 1.1vw, .78rem);
  font-weight: 900;
  letter-spacing: .28em;
  transform: rotate(-8deg);
}
.mayoi-guide-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(265%, 420px);
  max-width: none;
  height: auto;
  margin: 0 -28% -1% -18%;
  filter: drop-shadow(7px 10px 0 rgba(45,45,45,.1));
  transform: translateY(3%) scale(1.35);
  transform-origin: bottom center;
}
.mayoi-guide-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-top: 3%;
  transform: translate(clamp(-14px, -1.5vw, -6px), calc(-1 * clamp(145px, 34vw, 165px)));
}
.mayoi-guide-title {
  display: block;
  width: 118%;
  max-width: none;
  height: auto;
  margin: 0 0 18px -10%;
}
.mayoi-guide-content h2 {
  margin: 10px 0 18px;
  font-size: clamp(1.25rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: .12em;
}
.mayoi-guide-content .mayoi-copy {
  margin: 0;
  font-size: clamp(.78rem, 1.45vw, 1.12rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .09em;
  white-space: normal;
}
.mayoi-guide-links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 22px);
  width: 100%;
  /* 視覚上のイラスト・タイトル直下へ詰める（ビジュアルは上方へオフセット済み） */
  margin-top: calc(-1 * clamp(180px, 22vw, 250px));
}
.mayoi-guide-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: clamp(96px, 11vw, 120px);
  padding: 16px 22px;
  overflow: hidden;
  color: #2d2d2d;
  border: 3px solid #2d2d2d;
  border-radius: 30px;
  background: #fff;
  box-shadow: 7px 7px 0 #e57523;
  font-size: clamp(1.45rem, 4.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: .08em;
  transition: color .25s, background .25s, box-shadow .25s, transform .25s;
}
.mayoi-guide-links a::before {
  content: none;
}
.mayoi-guide-links a .mayoi-guide-link-text {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .06em;
}
.mayoi-guide-links a .mayoi-guide-link-arrow {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border-radius: 50%;
  background: #e57523;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .25s, background .25s;
}
.mayoi-guide-links a:hover {
  color: #fff;
  background: #e57523;
  border-color: #e57523;
  box-shadow: 6px 6px 0 #2d2d2d;
  transform: translate(-2px, -2px);
}
.mayoi-guide-links a:hover .mayoi-guide-link-arrow {
  color: #e57523;
  background: #fff;
  transform: translateX(4px);
}
@media (max-width: 768px) {
  .mayoi-guide-visual img {
    transform: translateY(3%) scale(1.12);
  }
}
@media (max-width: 520px) {
  .mayoi-guide {
    padding: 58px 16px 104px;
  }
  .mayoi-guide-layout {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 10px;
  }
  .mayoi-guide-visual {
    min-height: 330px;
  }
  .mayoi-guide-visual img {
    width: min(270%, 340px);
    margin-left: -22%;
    margin-right: -28%;
  }
  .mayoi-guide-content h2 {
    margin-top: 8px;
    font-size: 1.45rem;
  }
  .mayoi-guide-content .mayoi-copy {
    white-space: normal;
    font-size: .76rem;
  }
  .mayoi-guide-links {
    gap: 14px;
    margin-top: calc(-1 * clamp(180px, 22vw, 210px));
  }
  .mayoi-guide-links a {
    min-height: 92px;
    padding: 15px 18px;
    border-radius: 25px;
    box-shadow: 6px 6px 0 #e57523;
  }
  .mayoi-guide-links a .mayoi-guide-link-text {
    font-size: clamp(1.3rem, 4.8vw, 1.65rem);
  }
  .mayoi-guide-links a .mayoi-guide-link-arrow {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
  }
}
@media (max-width: 360px) {
  .mayoi-guide-layout {
    grid-template-columns: 1fr;
  }
  .mayoi-guide-visual {
    min-height: 260px;
    margin-bottom: -14px;
  }
  .mayoi-guide-visual img {
    width: min(115%, 300px);
    margin: 0 auto;
  }
  .mayoi-guide-content .mayoi-copy {
    white-space: nowrap;
  }
}

/* Profile editorial layout: Mayoi first, sister second. */
.mayoi-profile-section {
  position: relative;
  padding: clamp(72px, 8vw, 118px) clamp(18px, 4vw, 58px) clamp(110px, 12vw, 170px);
  background: #fffdf9;
  border-top: 0;
}
.mayoi-profile-intro {
  width: min(100%, 980px);
  margin: 0 auto clamp(34px, 5vw, 64px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(45,45,45,.65);
  padding-bottom: 18px;
}
.mayoi-profile-intro h2 {
  margin: 14px 0 0;
  font-size: clamp(2.35rem, 5vw, 5.3rem);
  line-height: .95;
  letter-spacing: .08em;
}
.mayoi-profile-intro-note {
  margin: 0 0 3px;
  color: #2d2d2d;
  font-size: clamp(.82rem, 1.4vw, 1.08rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .1em;
  text-align: right;
}
.mayoi-profile-sheets {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: clamp(34px, 5vw, 68px);
}
.mayoi-profile-sheet {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  min-height: clamp(470px, 54vw, 620px);
  overflow: hidden;
  border: 2px solid #2d2d2d;
}
.mayoi-profile-sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(270px, 38vw, 440px);
  height: clamp(270px, 38vw, 440px);
  right: 4%;
  top: 8%;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
}
.mayoi-profile-sheet::after {
  content: "MAYOI";
  position: absolute;
  z-index: -1;
  right: -3%;
  bottom: -4%;
  color: transparent;
  font-size: clamp(5rem, 13vw, 12rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .8;
  -webkit-text-stroke: 1px rgba(45,45,45,.15);
  transform: rotate(-8deg);
  pointer-events: none;
}
.mayoi-profile-sheet-sister::after {
  content: "SISTER";
  right: -4%;
  bottom: -1%;
  transform: rotate(7deg);
}
.mayoi-profile-sheet-mayoi {
  background: #fbe2cf;
  box-shadow: 13px 13px 0 #e57523;
}
.mayoi-profile-sheet-sister {
  background: #fff;
  box-shadow: 13px 13px 0 #eac745;
}
.mayoi-profile-sheet-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(28px, 5vw, 62px) clamp(22px, 5vw, 70px) clamp(28px, 4vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mayoi-profile-sheet-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(34px, 5vw, 62px);
  color: #2d2d2d;
  font-size: clamp(.58rem, 1vw, .75rem);
  font-weight: 800;
  letter-spacing: .16em;
}
.mayoi-profile-sheet-meta span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #2d2d2d;
  border-radius: 50%;
  font-size: .78rem;
  letter-spacing: 0;
}
.mayoi-profile-role {
  margin: 0 0 10px;
  color: #e57523;
  font-size: clamp(.62rem, 1.15vw, .82rem);
  font-weight: 900;
  letter-spacing: .19em;
  line-height: 1.4;
}
.mayoi-profile-sheet-sister .mayoi-profile-role { color: #a78300; }
.mayoi-profile-sheet h3 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: #2d2d2d;
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: .95;
}
.mayoi-profile-description {
  max-width: 31em;
  margin: 0;
  color: #2d2d2d;
  font-size: clamp(.83rem, 1.35vw, 1.02rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: .06em;
}
.mayoi-profile-quote {
  width: fit-content;
  max-width: 100%;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: 10px 0 10px 16px;
  border-left: 4px solid #e57523;
  color: #2d2d2d;
  font-size: clamp(.78rem, 1.2vw, .96rem);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .06em;
}
.mayoi-profile-sheet-sister .mayoi-profile-quote { border-left-color: #eac745; }
.mayoi-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(24px, 3.5vw, 44px);
}
.mayoi-profile-tags span {
  padding: 7px 12px;
  border: 1px solid #2d2d2d;
  color: #2d2d2d;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.mayoi-profile-sheet-art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: end;
  justify-content: center;
  border-left: 1px solid rgba(45,45,45,.22);
}
.mayoi-profile-sheet-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 7%;
  width: 30px;
  height: 30px;
  border: 2px solid #e57523;
  border-radius: 50%;
}
.mayoi-profile-sheet-sister .mayoi-profile-sheet-art::before { border-color: #eac745; }
.mayoi-profile-sheet-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: 111%;
  max-width: 125%;
  margin: 0 -6% -7% 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(9px 12px 0 rgba(45,45,45,.12));
}
.mayoi-profile-sheet-sister .mayoi-profile-sheet-art img {
  height: 105%;
  margin-right: -1%;
  margin-bottom: -4%;
}
.mayoi-profile-stamp {
  position: absolute;
  z-index: 4;
  right: 9%;
  top: 7%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  background: #e57523;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(10deg);
}
.mayoi-profile-sheet-sister .mayoi-profile-stamp { color: #2d2d2d; background: #eac745; transform: rotate(-10deg); }
.mayoi-profile-art-caption {
  position: absolute;
  z-index: 4;
  right: 6%;
  bottom: 7%;
  color: rgba(45,45,45,.62);
  font-size: clamp(.65rem, 1.1vw, .84rem);
  font-weight: 900;
  letter-spacing: .3em;
  writing-mode: vertical-rl;
}

@media (max-width: 768px) {
  .mayoi-profile-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .mayoi-profile-intro-note { margin-left: auto; text-align: right; }
  .mayoi-profile-sheet {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mayoi-profile-sheet-copy { min-height: 390px; padding: 30px 25px 28px; }
  .mayoi-profile-sheet-art {
    min-height: 390px;
    border-top: 1px solid rgba(45,45,45,.22);
    border-left: 0;
  }
  .mayoi-profile-sheet-art img { height: 115%; margin-bottom: -9%; }
  .mayoi-profile-sheet-sister .mayoi-profile-sheet-art img { height: 112%; margin-bottom: -6%; }
  .mayoi-profile-sheet::before { width: 300px; height: 300px; right: 50%; transform: translateX(50%); top: 48%; }
}
@media (max-width: 520px) {
  .mayoi-profile-section { padding-left: 16px; padding-right: 16px; }
  .mayoi-profile-intro h2 { font-size: 2.65rem; }
  .mayoi-profile-sheet { box-shadow: 8px 8px 0 #e57523; }
  .mayoi-profile-sheet-sister { box-shadow: 8px 8px 0 #eac745; }
  .mayoi-profile-sheet-copy { min-height: 370px; padding: 25px 20px 24px; }
  .mayoi-profile-sheet-meta { margin-bottom: 34px; font-size: .58rem; }
  .mayoi-profile-sheet-meta span:first-child { width: 32px; height: 32px; }
  .mayoi-profile-sheet h3 { font-size: 3.1rem; }
  .mayoi-profile-description { font-size: .79rem; line-height: 1.9; }
  .mayoi-profile-sheet-art { min-height: 330px; }
}

/* The fixed three-column shell can leave the central column narrow on desktop.
   Treat that column like a compact editorial page instead of squeezing text into
   a two-column card. */
.mayoi-central { container-type: inline-size; }
@media (min-width: 769px) {
  .mayoi-central { width: calc(100% / 3); min-width: 0; }
}
@container (max-width: 620px) {
  .mayoi-profile-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mayoi-profile-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .mayoi-profile-intro h2 {
    font-size: clamp(2.25rem, 10cqw, 3.8rem);
  }
  .mayoi-profile-intro-note {
    margin-left: auto;
    text-align: right;
  }
  .mayoi-profile-sheet {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mayoi-profile-sheet-copy {
    min-height: 0;
    padding: 30px 26px 28px;
  }
  .mayoi-profile-sheet-art {
    min-height: 410px;
    border-top: 1px solid rgba(45,45,45,.22);
    border-left: 0;
  }
  .mayoi-profile-sheet-art img {
    height: 112%;
    margin-bottom: -8%;
  }
  .mayoi-profile-sheet-sister .mayoi-profile-sheet-art img {
    height: 108%;
    margin-bottom: -5%;
  }
}

/* Profile editorial v2
   Keep the profile readable inside the fixed central column while giving each
   character a paper-sheet treatment, snapshots, outfit notes and a soft accent
   shadow. This block intentionally comes last so it wins over the older card
   fallback rules above. */
.mayoi-profile-section {
  position: relative;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(45,45,45,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,45,.065) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mayoi-profile-intro {
  border-bottom: 1px solid rgba(45,45,45,.55);
}
.mayoi-profile-sheets {
  gap: 42px;
}
.mayoi-profile-sheet {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #2d2d2d;
  background: rgba(255,255,255,.94);
}
.mayoi-profile-sheet::before {
  display: none;
}
.mayoi-profile-sheet::after {
  opacity: .18;
}
.mayoi-profile-sheet-mayoi {
  box-shadow: 9px 9px 0 rgba(229,117,35,.30);
}
.mayoi-profile-sheet-sister {
  box-shadow: 9px 9px 0 rgba(234,199,69,.42);
}
.mayoi-profile-sheet-copy {
  min-width: 0;
  min-height: 0;
  padding: 24px 16px 20px;
  display: block;
  background: rgba(255,255,255,.88);
}
.mayoi-profile-sheet-meta {
  gap: 7px;
  margin-bottom: 18px;
  font-size: .52rem;
  letter-spacing: .13em;
}
.mayoi-profile-sheet-meta span:first-child {
  width: 28px;
  height: 28px;
  font-size: .65rem;
}
.mayoi-profile-role {
  margin-bottom: 5px;
  font-size: .56rem;
  letter-spacing: .14em;
}
.mayoi-profile-sheet h3 {
  margin-bottom: 12px;
  font-size: clamp(2.2rem, 7cqw, 3.3rem);
  line-height: .95;
}
.mayoi-profile-description {
  font-size: clamp(.68rem, 1.7cqw, .84rem);
  line-height: 1.75;
  letter-spacing: .03em;
}
.mayoi-profile-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 14px;
}
.mayoi-profile-shots figure {
  min-width: 0;
  margin: 0;
  padding: 4px;
  background: #fff;
  border: 1px solid #2d2d2d;
  box-shadow: 3px 3px 0 rgba(229,117,35,.22);
  transform: rotate(-2deg);
}
.mayoi-profile-shots figure:nth-child(2) {
  transform: rotate(2deg);
}
.mayoi-profile-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mayoi-profile-shots figcaption {
  padding: 4px 2px 1px;
  color: #2d2d2d;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.15;
}
.mayoi-profile-shot-sister {
  background: #fffdf0 !important;
  box-shadow: 3px 3px 0 rgba(234,199,69,.35) !important;
}
.mayoi-profile-shot-sister img {
  object-fit: contain;
  background: #fff8d2;
}
.mayoi-profile-shot-sister-alt img {
  transform: scaleX(-1);
}
.mayoi-profile-points {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.mayoi-profile-points li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 0;
  border-top: 1px solid rgba(45,45,45,.18);
  color: #2d2d2d;
  font-size: .58rem;
  line-height: 1.35;
}
.mayoi-profile-points b {
  color: #e57523;
  font-size: .5rem;
  letter-spacing: .11em;
}
.mayoi-profile-sheet-sister .mayoi-profile-points b {
  color: #a78300;
}
.mayoi-profile-quote {
  margin: 12px 0 0;
  padding: 7px 0 7px 9px;
  border-left-width: 3px;
  font-size: .65rem;
  line-height: 1.5;
}
.mayoi-profile-tags {
  gap: 5px;
  margin-top: 12px;
  padding-top: 0;
}
.mayoi-profile-tags span {
  padding: 5px 7px;
  font-size: .5rem;
}
.mayoi-profile-sheet-art {
  min-height: 0;
  border-left: 1px solid rgba(45,45,45,.18);
  background: linear-gradient(145deg, rgba(255,248,243,.98), rgba(255,255,255,.98));
}
.mayoi-profile-sheet-sister .mayoi-profile-sheet-art {
  background: linear-gradient(145deg, rgba(255,251,215,.98), rgba(255,255,255,.98));
}
.mayoi-profile-sheet-art img {
  width: 100%;
  height: 96%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(9px 12px 0 rgba(229,117,35,.28));
}
.mayoi-profile-sheet-sister .mayoi-profile-sheet-art img {
  width: 100%;
  height: 92%;
  max-width: none;
  margin: 0;
  filter: drop-shadow(9px 12px 0 rgba(234,199,69,.40));
}
.mayoi-profile-stamp {
  width: 38px;
  height: 38px;
  right: 8%;
  top: 5%;
  font-size: .6rem;
}
.mayoi-profile-art-caption {
  right: 5%;
  bottom: 6%;
  font-size: .54rem;
}

@container (max-width: 400px) {
  .mayoi-profile-sheet {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mayoi-profile-sheet-art {
    min-height: 330px;
    border-top: 1px solid rgba(45,45,45,.18);
    border-left: 0;
  }
  .mayoi-profile-sheet-art img {
    height: 100%;
  }
  .mayoi-profile-sheet-sister .mayoi-profile-sheet-art img {
    height: 96%;
  }
}

/* Keep the profile cards vertical at every central-column width.  The copy
   stays first and the full-body cutout follows below it, so neither the
   character nor the descriptive points are squeezed or clipped on desktop. */
.mayoi-profile-sheets {
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 58px);
}
.mayoi-profile-sheet {
  grid-template-columns: 1fr;
  min-height: 0;
}
.mayoi-profile-sheet-copy {
  min-height: 0;
  padding: clamp(26px, 5vw, 48px) clamp(20px, 5vw, 56px) clamp(28px, 4vw, 44px);
}
.mayoi-profile-sheet-art {
  min-height: clamp(460px, 92cqw, 700px);
  border-top: 1px solid rgba(45,45,45,.18);
  border-left: 0;
}
.mayoi-profile-sheet-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
}
.mayoi-profile-sheet-sister .mayoi-profile-sheet-art img {
  width: 100%;
  height: 96%;
  margin: 0;
}

/* Final profile cleanup: the body copy is intentionally readable at the
   requested fixed size, while the artwork remains free of number badges and
   circular ornaments. */
.mayoi-profile-description {
  font-size: 17.5362px;
  line-height: 1.9;
}
.mayoi-profile-sheet-art::before,
.mayoi-profile-stamp {
  display: none;
}

.mayoi-profile-sheet-meta,
.mayoi-profile-role,
.mayoi-profile-tags span,
.mayoi-profile-art-caption {
  font-size: 17.0048px;
}
.mayoi-profile-sheet-meta span:first-child {
  font-size: 17.0048px;
}

.mayoi-profile-sheet-meta span:first-child {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  font-size: 34.0096px;
}
.mayoi-profile-sheet-mayoi .mayoi-profile-tags span {
  font-weight: 800;
}

/* Creator page: a centered title followed by clean, vertical information
   blocks and a stacked set of external links. */
.creator-hero {
  min-height: 300px;
}
.creator-section {
  padding-top: clamp(56px, 8vw, 92px);
  padding-bottom: clamp(78px, 11vw, 130px);
  background-color: #fff;
  background-image: none;
}
.creator-heading {
  max-width: 640px;
  margin: 0 auto clamp(30px, 5vw, 48px);
  text-align: center;
}
.creator-heading .mayoi-kicker {
  margin-bottom: 14px;
}
.creator-heading h2 {
  margin: 0 0 18px;
  color: #2d2d2d;
  /* The former production-title size is now used for the main heading. */
  font-size: clamp(1.35rem, 3.1vw, 2.1rem) !important;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
}
.creator-lead {
  margin: 0 auto;
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .05em;
}
.creator-stack {
  width: min(100%, 760px);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 56px);
}
.creator-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.creator-info-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 16px 20px;
  border: 0;
  border-radius: 14px;
  background: rgba(234,199,69,.18);
  color: #2d2d2d;
  box-shadow: none;
}
.creator-info-card:first-child {
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid #2d2d2d;
}
.creator-info-card:last-child {
  border-radius: 0 0 14px 14px;
}
.creator-info-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  background: #e57523;
  font-size: 17.5362px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
}
.creator-info-value {
  margin: 0;
  color: #2d2d2d;
  font-size: 17.5362px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.4;
}
.creator-link-stack {
  display: grid;
  gap: 13px;
}
.creator-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 14px 18px;
  border: 1px solid #2d2d2d;
  color: #2d2d2d;
  background: #fff;
  box-shadow: 6px 6px 0 rgba(229,117,35,.24);
  transition: color .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.creator-link-card:hover {
  color: #fff;
  background: #e57523;
  box-shadow: 3px 3px 0 #2d2d2d;
  transform: translate(3px, 3px);
}
.creator-link-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.creator-link-copy b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.creator-link-copy small {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.creator-link-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #e57523;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  transition: color .22s ease, background-color .22s ease;
}
.creator-link-card:hover .creator-link-arrow {
  color: #e57523;
  background: #fff;
}
@container (max-width: 420px) {
  .creator-info-card {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 16px;
  }
  .creator-info-label,
  .creator-info-value {
    font-size: 17.5362px;
  }
  .creator-link-card {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
    padding-inline: 12px;
  }
  .creator-link-copy b {
    font-size: .98rem;
  }
  .creator-link-copy small {
    font-size: .7rem;
  }
}

/* PR page: keep the same calm white canvas, centered headings, rounded
   accent labels, and vertical cards as the creator page. */
.pr-page {
  background: #fff;
}
.pr-page .creator-hero {
  min-height: 300px;
  background: #fff;
}
.pr-page > .mayoi-section {
  width: 100%;
  margin-inline: 0;
  padding: clamp(64px, 8vw, 92px) clamp(18px, 6vw, 76px);
  border-top: 0;
  background: #fff;
}
.pr-page > .mayoi-section > .mayoi-kicker,
.pr-page > .mayoi-section > h2 {
  text-align: center;
}
.pr-page > .mayoi-section > h2 {
  margin: 18px auto 24px;
  font-size: 23.913px !important;
  line-height: 1.35;
}
.pr-page > .mayoi-section > .mayoi-copy {
  width: min(100%, 760px);
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.95;
}
.pr-page .mayoi-card-grid {
  width: min(100%, 760px);
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pr-page .mayoi-info-card {
  padding: 22px 24px;
  border: 0;
  border-radius: 14px;
  background: rgba(234,199,69,.18);
  box-shadow: none;
}
.pr-page .mayoi-info-card h3 {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 13px;
  padding: 7px 15px;
  border-radius: 999px;
  color: #fff;
  background: #e57523;
  font-size: 17.5362px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
}
.pr-page .mayoi-info-card p {
  margin: 0;
  color: #2d2d2d;
  font-size: 16px;
  line-height: 1.9;
}
.pr-page .mayoi-flow {
  width: min(100%, 760px);
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pr-page .mayoi-flow-card {
  padding: 22px 24px;
  border: 0;
  border-radius: 14px;
  background: rgba(234,199,69,.18);
}
.pr-page .mayoi-flow-card b {
  color: #e57523;
  font-size: .76rem;
  letter-spacing: .12em;
}
.pr-page .mayoi-flow-card h3 {
  margin: 8px 0 10px;
  font-size: 17.5362px;
  font-weight: 700;
}
.pr-page .mayoi-flow-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
}
.pr-page .mayoi-guide {
  padding-bottom: clamp(90px, 11vw, 130px);
  background: #fff;
}
.pr-page .mayoi-cta {
  display: flex;
  width: fit-content;
  margin: 34px auto 0;
  border-radius: 999px;
  padding: 16px 24px;
}
@media (max-width: 520px) {
  .pr-page > .mayoi-section {
    padding-inline: 16px;
  }
  .pr-page .mayoi-info-card,
  .pr-page .mayoi-flow-card {
    padding: 18px;
  }
}

/* PR hero and about section refinements.  The hero image sits at the very
   top, while the typography follows the creator-page heading/lead scale. */
.pr-page .creator-hero {
  min-height: 0;
  padding: 0 clamp(18px, 6vw, 76px) clamp(72px, 9vw, 108px);
  display: block;
  text-align: center;
}
.pr-hero-image {
  width: calc(100% + clamp(36px, 12vw, 152px));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 clamp(34px, 5vw, 56px) calc(-1 * clamp(18px, 6vw, 76px));
  overflow: hidden;
  background: #f4f4f4;
}
.pr-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pr-page .creator-hero h1 {
  width: min(100%, 760px);
  margin: 0 auto 18px;
  font-size: clamp(1.35rem, 3.1vw, 2.1rem) !important;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.35;
}
.pr-page .creator-hero .mayoi-copy {
  width: min(100%, 760px);
  margin: 0 auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .05em;
}
.pr-page .mayoi-cta.pr-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 760px);
  min-height: 82px;
  margin: 34px auto 0;
  padding: 14px 22px 14px 24px;
  border: 3px solid #2d2d2d;
  border-radius: 30px;
  color: #2d2d2d;
  background: #fff;
  box-shadow: 7px 7px 0 #e57523;
  font-size: 17.5362px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.pr-cta-arrow {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #e57523;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  transition: color .25s, background .25s, transform .25s;
}
.pr-page .mayoi-cta.pr-cta:hover {
  color: #fff;
  background: #e57523;
  border-color: #e57523;
  box-shadow: 6px 6px 0 #2d2d2d;
  transform: translate(-2px, -2px);
}
.pr-page .mayoi-cta.pr-cta:hover .pr-cta-arrow {
  color: #e57523;
  background: #fff;
  transform: translateX(4px);
}
.pr-page .pr-about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pr-page .pr-about::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    url("../img/mayoi/mv/mayoi-eat-pancakes.png") center / cover no-repeat;
  pointer-events: none;
}
.pr-page .pr-about > * {
  position: relative;
  z-index: 1;
}
.pr-page .pr-about > .mayoi-copy {
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}
@media (max-width: 520px) {
  .pr-page .creator-hero {
    padding-inline: 16px;
  }
  .pr-hero-image {
    width: calc(100% + 32px);
    margin-left: -16px;
  }
  .pr-page .mayoi-cta.pr-cta {
    min-height: 74px;
    padding-left: 18px;
    font-size: 16px;
  }
  .pr-cta-arrow {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
}

/* PR page final polish: keep the lead copy on one line where the column
   allows it, enlarge the CTA label, and turn the closing contact block into
   a yellow stage with a white card and peeking Mayoi mascot. */
.pr-page .pr-hero-image {
  aspect-ratio: 1080 / 504;
}
.pr-page .creator-hero h1 {
  white-space: normal;
  font-size: clamp(.92rem, 4cqw, 2.1rem) !important;
  letter-spacing: .04em;
}
.pr-page .creator-hero .mayoi-copy {
  white-space: normal;
}
.pr-page .mayoi-cta.pr-cta {
  font-size: 20px;
}
.pr-page .pr-contact {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: clamp(240px, 28vw, 360px) clamp(18px, 6vw, 76px) clamp(72px, 9vw, 108px);
  border-top: 0;
  background: #eac745;
}
.pr-page .pr-contact-card {
  position: relative;
  width: min(calc(100% + clamp(36px, 8vw, 96px)), 900px);
  margin: 0 0 0 calc(-1 * clamp(18px, 4vw, 48px));
  padding: clamp(46px, 6vw, 64px) clamp(18px, 3vw, 40px) clamp(30px, 4vw, 46px);
  border: 2px solid #897019;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}
.pr-page .pr-contact-card h2 {
  margin: 0 auto 22px;
  font-size: 23.913px !important;
  line-height: 1.45;
  letter-spacing: .06em;
}
.pr-page .pr-contact-card .mayoi-copy {
  width: min(100%, 760px);
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.9;
}
.pr-page .pr-contact-card .pr-cta {
  width: min(100%, 760px);
  margin-top: 30px;
}
.pr-page .pr-contact-mini-wrap {
  position: absolute;
  z-index: 2;
  top: clamp(-132px, -12vw, -90px);
  left: 50%;
  width: clamp(140px, 22vw, 190px);
  height: clamp(120px, 18vw, 155px);
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}
.pr-page .pr-contact-mini {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.mayoi-profile-section {
  background-color: #f0f0f2;
}
.mayoi-profile-intro h2,
.mayoi-profile-intro-note {
  font-size: clamp(.92rem, 4cqw, 2.1rem) !important;
}
.mayoi-profile-intro h2 {
  line-height: 1.35;
}
.mayoi-profile-intro-note {
  line-height: 1.35;
}
@media (max-width: 520px) {
  .pr-page .creator-hero h1 {
    font-size: clamp(.82rem, 4.2cqw, 1.25rem) !important;
    letter-spacing: .015em;
  }
  .pr-page .mayoi-cta.pr-cta {
    font-size: 18px;
  }
  .pr-page .pr-contact {
    padding-top: 240px;
  }
  .pr-page .pr-contact-card h2 {
    font-size: 20px !important;
  }
  .pr-page .pr-contact-mini-wrap {
    width: 150px;
    height: 126px;
  }
}

/* Shared CTA system: guide links, creator links, and PR consultation buttons
   use the same rounded silhouette, type scale, and circular arrow. */
.mayoi-guide-links a,
.creator-link-card,
.pr-page .mayoi-cta.pr-cta {
  min-height: 82px;
  padding: 14px 22px 14px 24px;
  border: 3px solid #2d2d2d;
  border-radius: 30px;
  font-size: 16.4734px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;
}
.mayoi-guide-links a,
.creator-link-card {
  color: #2d2d2d;
  background: #fff;
  box-shadow: 7px 7px 0 #e57523;
}
.mayoi-guide-links a .mayoi-guide-link-text,
.creator-link-copy b {
  font-size: 16.4734px;
  font-weight: 700;
  line-height: 1.25;
}
.creator-link-card {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 14px;
}
.creator-link-copy small {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.mayoi-guide-links a .mayoi-guide-link-arrow,
.creator-link-arrow,
.pr-cta-arrow {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e57523;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
.pr-page .mayoi-cta.pr-cta {
  color: #fff;
  background: #e57523;
  border-color: #e57523;
  box-shadow: 7px 7px 0 #eac745;
}
.pr-page .mayoi-cta.pr-cta .pr-cta-arrow {
  color: #e57523;
  background: #fff;
}
.pr-page .mayoi-cta.pr-cta:hover {
  color: #2d2d2d;
  background: #fff1e7;
  border-color: #e57523;
  box-shadow: 6px 6px 0 #eac745;
  transform: translate(-2px, -2px);
}
.pr-page .mayoi-cta.pr-cta:hover .pr-cta-arrow {
  color: #fff;
  background: #e57523;
}

/* Keep the guide navigation target high enough to reveal Mayoi's face when
   the fixed left navigation jumps to the section. */
.mayoi-guide-anchor {
  position: absolute;
  top: clamp(-172px, -15vw, -120px);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* The supplied desk illustration should meet the contact card's dark top
   border at the desk/character boundary. */
.pr-page .pr-contact-card {
  overflow: visible;
}
.pr-page .pr-contact-mini-wrap {
  top: auto;
  bottom: calc(100% - 2px);
  width: clamp(250px, 34vw, 380px);
  height: auto;
  overflow: visible;
}
.pr-page .pr-contact-mini {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: normal;
}

@media (max-width: 520px) {
  .mayoi-guide-links a,
  .creator-link-card,
  .pr-page .mayoi-cta.pr-cta {
    min-height: 74px;
    padding: 12px 18px;
    border-radius: 25px;
  }
  .mayoi-guide-links a .mayoi-guide-link-arrow,
  .creator-link-arrow,
  .pr-cta-arrow {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
  .creator-link-card {
    grid-template-columns: minmax(0, 1fr) 46px;
  }
  .pr-page .pr-contact-mini-wrap {
    width: 250px;
  }
}

/* Final shared button and responsive type pass.  Keep the arrow artwork
   identical across guide, creator, and PR actions. */
.mayoi-guide-links a .cta-arrow-icon,
.creator-link-arrow .cta-arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mayoi-guide-links a:hover .cta-arrow-icon,
.creator-link-card:hover .cta-arrow-icon {
  content: url("../img/common/arrow-circle-hover.svg");
  filter: none;
}
.pr-page .pr-cta-arrow {
  font-size: 0;
}
.pr-page .pr-cta-arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/common/arrow-circle.svg") center / contain no-repeat;
}
.pr-page .pr-cta.pr-cta .pr-cta-arrow {
  background: #fff;
}
.pr-page .pr-cta.pr-cta .pr-cta-arrow::after {
  filter: none;
}
.pr-page .pr-cta.pr-cta:hover .pr-cta-arrow {
  background: #e57523;
}
.pr-page .pr-cta.pr-cta:hover .pr-cta-arrow::after {
  background-image: url("../img/common/arrow-circle-hover.svg");
  filter: none;
}
.pr-page .mayoi-cta.pr-cta,
.pr-page .mayoi-cta.pr-cta:hover {
  border-color: #2d2d2d;
}

/* The supplied transparent desk illustration is used for the closing PR
   panel; the desk edge meets the card's dark top border. */
.pr-page .pr-contact-mini {
  content: url("../img/mayoi/guide/mayoi-guide-contact-v2.png");
}
.creator-link-stack {
  gap: 24px;
}

@media (max-width: 768px) {
  /* Shared SP scale: keep the hierarchy legible in the narrow central column. */
  .mayoi-central .mayoi-page-hero h1,
  .mayoi-central .mayoi-hero h1 {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.35;
  }
  .mayoi-central h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.45;
  }
  .mayoi-central h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45;
  }
  .mayoi-central .mayoi-lead,
  .mayoi-central .creator-lead,
  .mayoi-central .creator-hero .mayoi-copy,
  .mayoi-central .mayoi-page-hero > .mayoi-copy {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.8;
  }
  .mayoi-central .mayoi-copy,
  .mayoi-central .mayoi-profile-description,
  .mayoi-central .mayoi-profile-quote,
  .mayoi-central .mayoi-info-card p,
  .mayoi-central .mayoi-flow-card p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.85;
  }
  .mayoi-central .mayoi-guide-links a,
  .mayoi-central .creator-link-card,
  .mayoi-central .mayoi-cta,
  .mayoi-central .pr-cta {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .mayoi-central .mayoi-guide-links a .mayoi-guide-link-text,
  .mayoi-central .creator-link-copy b {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .mayoi-central .mayoi-kicker,
  .mayoi-central .mayoi-eyebrow,
  .mayoi-central .creator-link-copy small,
  .mayoi-central .mayoi-flow-card b,
  .mayoi-central .mayoi-profile-sheet-meta,
  .mayoi-central .mayoi-profile-role,
  .mayoi-central .mayoi-profile-tags span,
  .mayoi-central .mayoi-profile-art-caption {
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .mayoi-central .mayoi-profile-intro h2 {
    font-size: 30px !important;
  }
  .mayoi-central .mayoi-profile-intro-note {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.35;
  }
  .pr-page .creator-hero h1 {
    font-size: 30px !important;
  }
  .pr-page .creator-hero .mayoi-copy {
    font-size: 18px !important;
  }
  .pr-page .pr-contact-card h2 {
    font-size: 24px !important;
  }
  .pr-page > .mayoi-section > h2,
  .pr-page .pr-contact-card h2 {
    font-size: 24px !important;
  }
}

/* Final request pass: title art clears the fixed header, process art remains
   vertical, and the closing mascot is half-size. */
.mayoi-fan-hero,
.creator-title-hero {
  padding-top: clamp(88px, 8vw, 120px);
}
.pr-page .mayoi-flow-visual {
  position: relative;
  display: grid;
  gap: 26px;
  width: min(100%, 760px);
  margin: 0 auto;
}
.pr-page .mayoi-flow-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 59px;
  top: 70px;
  bottom: 70px;
  width: 2px;
  background: #e57523;
}
.pr-page .mayoi-flow-visual .mayoi-flow-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 132px;
  padding: 10px 20px 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pr-page .mayoi-flow-visual .mayoi-flow-card:not(:last-child)::after {
  content: "↓";
  position: absolute;
  z-index: 2;
  left: 47px;
  bottom: -26px;
  color: #e57523;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.pr-page .mayoi-flow-icon {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid #2d2d2d;
  border-radius: 50%;
  background: #fff;
  box-shadow: 7px 7px 0 rgba(234,199,69,.55);
}
.pr-page .mayoi-flow-card:nth-child(even) .mayoi-flow-icon {
  box-shadow: 7px 7px 0 rgba(229,117,35,.32);
}
.pr-page .mayoi-flow-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}
.pr-page .mayoi-flow-card:nth-child(2) .mayoi-flow-icon img,
.pr-page .mayoi-flow-card:nth-child(4) .mayoi-flow-icon img {
  object-position: center 18%;
}
.pr-page .mayoi-flow-copy { min-width: 0; }
.pr-page .mayoi-flow-copy b {
  display: block;
  color: #e57523;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}
.pr-page .mayoi-flow-copy h3 {
  margin: 7px 0 8px;
  color: #2d2d2d;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.pr-page .mayoi-flow-copy p {
  margin: 0;
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
.pr-page .pr-contact-mini-wrap {
  width: clamp(125px, 17vw, 190px);
  height: auto;
  bottom: calc(100% - 24px);
}
.pr-page .pr-contact-mini {
  content: url("../img/mayoi/guide/mayoi-guide-contact-v3.png");
  mix-blend-mode: normal;
}
.mayoi-guide-links a,
.creator-link-card,
.pr-page .mayoi-cta.pr-cta,
.mayoi-guide-links a .mayoi-guide-link-text,
.creator-link-copy b {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.mayoi-guide-links a .cta-arrow-icon,
.creator-link-arrow .cta-arrow-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .mayoi-fan-hero,
  .creator-title-hero { padding-top: 96px; }
  .mayoi-profile-intro {
    align-items: center;
    flex-direction: column;
    gap: 12px;
  }
  .mayoi-profile-intro-note {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pr-page .mayoi-flow-visual {
    gap: 22px;
  }
  .pr-page .mayoi-flow-visual::before {
    left: 43px;
    top: 52px;
    bottom: 52px;
  }
  .pr-page .mayoi-flow-visual .mayoi-flow-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    min-height: 98px;
    padding-right: 0;
  }
  .pr-page .mayoi-flow-visual .mayoi-flow-card:not(:last-child)::after {
    left: 32px;
    bottom: -23px;
    font-size: 26px;
  }
  .pr-page .mayoi-flow-icon {
    width: 88px;
    height: 88px;
    box-shadow: 5px 5px 0 rgba(234,199,69,.55);
  }
  .pr-page .mayoi-flow-card:nth-child(even) .mayoi-flow-icon {
    box-shadow: 5px 5px 0 rgba(229,117,35,.32);
  }
  .pr-page .pr-contact-mini-wrap {
    width: 125px;
    bottom: calc(100% - 18px);
  }
}

/* Creator title art: let the supplied image touch all four edges of the
   central column.  The section separator belongs to the following content,
   so it is removed directly beneath the artwork. */
body#mayoi .mayoi-central .creator-title-hero {
  width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}
body#mayoi .mayoi-central .creator-title-art {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body#mayoi .mayoi-central .creator-title-art img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  margin: 0 !important;
}
body#mayoi .mayoi-central .creator-title-hero + .creator-section {
  border-top: 0;
}

/* Match the TOP guide buttons and keep each link's explanatory line one
   step lighter while still legible in the narrow central column. */
body#mayoi .mayoi-central .creator-link-card,
body#mayoi .mayoi-central .creator-link-copy b {
  font-size: 20px !important;
  font-weight: 700 !important;
}
body#mayoi .mayoi-central .creator-link-copy small {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45;
}

/* PR page finishing adjustments: use the same button typography and arrow
   artwork as the TOP guide links. */
.pr-page .mayoi-cta.pr-cta,
.pr-page .mayoi-cta.pr-cta > span:first-child {
  font-size: 20px !important;
  font-weight: 700 !important;
}
.pr-page .pr-cta-arrow::after {
  /* The PR CTA uses the TOP hover treatment even in its normal orange
     state: a white circle with a plain orange arrow. */
  width: 52px !important;
  height: 52px !important;
  background-image: url("../img/common/arrow-circle-hover.svg") !important;
}
.pr-page .pr-cta.pr-cta:hover .pr-cta-arrow::after {
  background-image: url("../img/common/arrow-circle-hover.svg") !important;
}

/* Replace the illustrated flow icons with clean numbered circles.  The
   orange vertical guide is intentionally removed while the inter-step arrows
   remain as the directional cue. */
.pr-page .mayoi-flow-visual::before {
  display: none !important;
}
.pr-page .mayoi-flow-icon img {
  display: none !important;
}
.pr-page .mayoi-flow-icon > span {
  display: none !important;
}
.pr-page .mayoi-flow-icon::after {
  display: block;
  color: #2d2d2d;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.pr-page .mayoi-flow-card:nth-child(1) .mayoi-flow-icon::after { content: "01"; }
.pr-page .mayoi-flow-card:nth-child(2) .mayoi-flow-icon::after { content: "02"; }
.pr-page .mayoi-flow-card:nth-child(3) .mayoi-flow-icon::after { content: "03"; }
.pr-page .mayoi-flow-card:nth-child(4) .mayoi-flow-icon::after { content: "04"; }
.pr-page .mayoi-flow-card:nth-child(5) .mayoi-flow-icon::after { content: "05"; }
.pr-page .mayoi-flow-copy b {
  font-size: 0 !important;
}
.pr-page .mayoi-flow-copy b::after {
  display: block;
  color: #e57523;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
}
.pr-page .mayoi-flow-card:nth-child(1) .mayoi-flow-copy b::after { content: "CONTACT"; }
.pr-page .mayoi-flow-card:nth-child(2) .mayoi-flow-copy b::after { content: "HEARING"; }
.pr-page .mayoi-flow-card:nth-child(3) .mayoi-flow-copy b::after { content: "PLANNING"; }
.pr-page .mayoi-flow-card:nth-child(4) .mayoi-flow-copy b::after { content: "CREATION"; }
.pr-page .mayoi-flow-card:nth-child(5) .mayoi-flow-copy b::after { content: "POST"; }

/* Bring the mascot closer to the yellow band/card boundary, matching the
   supplied reference while keeping a small, centered peek. */
.pr-page .pr-contact {
  padding-top: clamp(130px, 15vw, 190px) !important;
}
.pr-page .pr-contact-mini-wrap {
  bottom: calc(100% - 8px) !important;
}

@media (max-width: 768px) {
  .pr-page .mayoi-flow-icon::after {
    font-size: 30px;
  }
  .pr-page .pr-cta-arrow::after {
    width: 46px !important;
    height: 46px !important;
  }
  .pr-page .pr-contact {
    padding-top: 130px !important;
  }
  .pr-page .pr-contact-mini-wrap {
    bottom: calc(100% - 6px) !important;
  }
}

/* Current layout pass: keep the profile surface aligned to the full central
   column at every breakpoint, while preserving a comfortable inner gutter. */
body#mayoi .mayoi-central .mayoi-profile-section {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
body#mayoi .mayoi-central .mayoi-profile-intro,
body#mayoi .mayoi-central .mayoi-profile-sheets {
  width: 100% !important;
  max-width: none !important;
}
body#mayoi .mayoi-central .mayoi-profile-sheet h3 {
  font-size: 40px !important;
}
body#mayoi .mayoi-central .mayoi-profile-sheet-meta span:first-child {
  border-width: 2px !important;
}

/* Let the PR hero artwork touch the top and both side edges of the central
   column; the text and CTA retain a small readable gutter. */
.pr-page .creator-hero {
  width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 0 clamp(72px, 9vw, 108px) !important;
}
.pr-page .pr-hero-image {
  width: 100% !important;
  margin: 0 0 clamp(34px, 5vw, 56px) !important;
}
.pr-page .creator-hero h1,
.pr-page .creator-hero .mayoi-copy,
.pr-page .creator-hero .pr-cta {
  width: min(calc(100% - 32px), 760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* A light graph-paper field behind the complete PR process section. */
.pr-page .pr-flow-section {
  background-color: #fff;
  background-image: url("../img/mayoi/flow-grid.svg");
  background-repeat: repeat;
  background-size: 32px 32px;
}

/* Remove the old fixed-header compensation from the subpage heroes.  The
   mobile header is now overlay-only, so the supplied title artwork can begin
   at the very top and touch both sides of the central column. */
body#mayoi .mayoi-central .mayoi-fan-hero,
body#mayoi .mayoi-central .creator-title-hero {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}
body#mayoi .mayoi-central .mayoi-fan-hero .fan-title-art,
body#mayoi .mayoi-central .creator-title-hero .creator-title-art,
body#mayoi .mayoi-central .mayoi-fan-hero .fan-title-art img,
body#mayoi .mayoi-central .creator-title-hero .creator-title-art img {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Center the platform/model rows instead of leaving their values aligned to
   the left edge of the information grid. */
body#mayoi .creator-info-card {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}
body#mayoi .creator-info-label,
body#mayoi .creator-info-value {
  justify-self: center !important;
  text-align: center !important;
}

/* The desktop PR copy uses a narrower reading measure and a content-width
   consultation button.  The SP heading keeps its explicit three-line break;
   desktop hides only the optional SP break. */
@media (min-width: 769px) {
  .pr-page .creator-hero h1 .sp-only-break {
    display: none !important;
  }
  .pr-page .creator-hero .mayoi-copy,
  .pr-page .pr-contact-card .mayoi-copy {
    width: min(100% - 32px, 620px) !important;
    max-width: 620px !important;
  }
  .pr-page .creator-hero .pr-cta,
  .pr-page .pr-contact-card .pr-cta {
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  body#mayoi .mayoi-central .mayoi-profile-sheet h3 {
    font-size: 26px !important;
  }
}