@charset "UTF-8";

:root {
  --rdOrange: #f39800;
  --rdBlue: #0075c1;
  --archH: clamp(30px, 6vw, 100px);
  --tagFontSize: clamp(13px, calc(1.1vw + 8.87px), 30px);
  --tagHeight: clamp(34px, calc(2.589vw + 24.29px), 74px);
  --tagHeightLead: clamp(68px, calc(0.388vw + 66.54px), 74px);
}

.br-sp-only {
  display: none;
}

.br-pc-only {
  display: inline;
}

/* ===== Hero section ===== */
.rd-hero {
  position: relative;
  background: #ebf5ff;
  padding-top: 90px;
  padding-bottom: calc(90px + var(--archH));
  overflow: hidden;
}

.rd-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--archH);
  background: #f9ede5;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.rd-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.rd-hero__body {
  flex: 0 0 auto;
  min-width: 0;
  margin-top: 60px;
  padding-left: max(20px, calc((100vw - 1280px) / 2 - 180px));
  box-sizing: border-box;
}

.rd-hero__logo {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  margin: 0 0 64px;
}

.rd-hero__text {
  width: 600px;
  max-width: 100%;
}

.rd-hero__text p {
  font-size: 1.7rem;
  font-weight: 1000;
  line-height: 1.94;
  letter-spacing: 0.08em;
  color: #231815;
  margin: 0 0 32px;
}

.rd-hero__text p:last-child {
  margin-bottom: 0;
}

.rd-hero__visual {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: -90px;
}

.rd-hero__photo {
  display: block;
  width: 100%;
  height: auto;
}

.rd-hero__mobile {
  display: none;
}

.rd-about__inner.rd-hero__about {
  margin-top: 60px;
  margin-bottom: 0;
}

/* Below 1920px, scale the whole hero (logo, text column, gaps) down
   fluidly with the viewport instead of switching to a stacked layout,
   so the image:text balance holds while shrinking across common desktop widths. */
@media screen and (max-width: 1920px) {
  .rd-hero {
    padding-top: max(30px, 4.6875vw);
    padding-bottom: calc(max(30px, 4.6875vw) + var(--archH));
  }

  .rd-hero__inner {
    gap: max(20px, 3.125vw);
  }

  .rd-hero__body {
    margin-top: max(16px, 3.125vw);
    padding-left: max(60px, 4.166667vw);
  }

  .rd-hero__logo {
    width: max(140px, 18.229167vw);
    margin-bottom: max(18px, 3.333333vw);
  }

  .rd-hero__text {
    width: 31.25vw;
  }

  .rd-hero__text p {
    font-size: max(8.5px, .885vw);
    margin-bottom: max(9px, 1.666667vw);
  }

  .rd-hero__visual {
    margin-top: min(-10px, -4.6875vw);
  }

  .rd-about__inner.rd-hero__about {
    margin-top: max(30px, 4.6875vw);
    margin-bottom: 0;
  }
}

/* ===== About section ===== */
.rd-about {
  padding: 8px 20px clamp(6px, 1.8vw, 12px);
  background: #f9ede5;
}

.rd-about__inner {
  container-type: inline-size;
  max-width: min(900px, 62.5vw);
  margin: 0 auto 56px;
  text-align: center;
}

.rd-about__tag {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  padding: 0 min(56px, 6.2cqw);
  height: var(--tagHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  margin: 0 auto 32px;
}

.rd-about__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(6px, -6px);
  z-index: -1;
}

.rd-about__tag-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-about__tag-line--top,
.rd-about__tag-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-about__tag-line--top {
  top: 0;
}

.rd-about__tag-line--bottom {
  bottom: 0;
}

.rd-about__tag-line--left,
.rd-about__tag-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-about__tag-line--left {
  left: 0;
}

.rd-about__tag-line--right {
  right: 0;
}

.rd-about__grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: min(68px, 7.5556cqw);
}

.rd-about__card {
  flex: 0 1 min(320px, 35.555556cqw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rd-about__card a {
  display: block;
  width: 100%;
  transition: opacity .2s;
}

.rd-about__card a:hover {
  opacity: .7;
}

.rd-about__card img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Battle block --- */
.rd-about__battle {
  container-type: inline-size;
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}

.rd-about__battle-lead {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  padding: 0 min(56px, 6.2cqw);
  height: var(--tagHeight);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  background: #fbeee3;
  margin: 0 auto clamp(6px, 1.8vw, 12px);
}

.rd-about__battle-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(6px, -6px);
  z-index: -1;
}

.rd-about__battle-lead-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-about__battle-lead-line--top,
.rd-about__battle-lead-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-about__battle-lead-line--top {
  top: 0;
}

.rd-about__battle-lead-line--bottom {
  bottom: 0;
}

.rd-about__battle-lead-line--left,
.rd-about__battle-lead-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-about__battle-lead-line--left {
  left: 0;
}

.rd-about__battle-lead-line--right {
  right: 0;
}

.rd-about__battle-title {
  display: block;
  width: 100%;
  max-width: 1264px;
  height: auto;
  margin: 0 auto 48px;
}

.rd-about__battle-desc {
  max-width: 1000px;
  margin: 0 auto 12px;
  font-size: clamp(15px, calc(0.6072vw + 10.342px), 22px);
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: 0.11em;
  color: #231815;
  text-align: center;
}

.rd-about__battle-note {
  max-width: 1000px;
  margin: 20px auto 40px;
  font-size: clamp(11.2px, calc(0.59028vw + 6.667px), 18px);
  font-weight: 500;
  line-height: 2.12;
  letter-spacing: 0.07em;
  color: #231815;
  text-align: center;
}

.rd-about__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 56px;
  margin-top: clamp(50px, 6.034cqw, 70px);
}

.rd-about__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 400px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #231815;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  text-align: center;
}

.rd-about__step-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.rd-about__step-num-wrap {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, -30%);
  width: 23.75%;
  aspect-ratio: 95 / 93;
  container-type: inline-size;
  z-index: 2;
}

.rd-about__step-num {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}

.rd-about__step-num-fill {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #edd2c3;
  border-radius: 50%;
  transform: translate(8.4%, -6.5%);
  z-index: 2;
}

.rd-about__step-num-ring {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid #231815;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.rd-about__step-num-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(21px, calc(2.4595vw + 11.777px), 59px);
  font-weight: 400;
  color: #231815;
  z-index: 4;
}

.rd-about__step-visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 400 / 318;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #231815;
  box-sizing: border-box;
}

.rd-about__step-visual--bottom {
  align-items: flex-end;
}

.rd-about__step-icon {
  display: block;
  width: 65%;
  height: auto;
  max-width: 220px;
}

.rd-about__step-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #333;
  padding: 16px 24px;
  box-sizing: border-box;
}

/* ===== Clubs section ===== */
.rd-clubs {
  padding: 30px 20px clamp(6px, 1.8vw, 12px);
  background: #f9ede5;
}

.rd-clubs__inner {
  container-type: inline-size;
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.rd-clubs__left {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rd-clubs__bubble {
  display: block;
  width: 100%;
  max-width: min(280px, 22.2cqw);
  height: auto;
  margin: 0 0 12px;
}

.rd-clubs__highlight {
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  color: #231815;
}

.rd-clubs__highlight--sp {
  display: none;
}

.rd-clubs__highlight-main {
  display: inline-block;
  font-size: min(3.8rem, 3.02cqw);
  white-space: nowrap;
  background: #edd2c3;
  padding: 4px 12px;
}

.rd-clubs__highlight-sub {
  font-size: min(2.9rem, 2.3cqw);
}

.rd-clubs__right {
  container-type: inline-size;
  position: relative;
  flex: 1 1 692px;
  min-width: 0;
  max-width: min(692px, 54.9cqw);
  text-align: center;
}

.rd-clubs__tag {
  position: relative;
  top: min(40px, 5.78cqw);
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  padding: 0 min(56px, 6.2cqw);
  height: var(--tagHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  margin: 0 auto 22px;
}

.rd-clubs__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(6px, -6px);
  z-index: -1;
}

.rd-clubs__tag-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-clubs__tag-line--top,
.rd-clubs__tag-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-clubs__tag-line--top {
  top: 0;
}

.rd-clubs__tag-line--bottom {
  bottom: 0;
}

.rd-clubs__tag-line--left,
.rd-clubs__tag-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-clubs__tag-line--left {
  left: 0;
}

.rd-clubs__tag-line--right {
  right: 0;
}

.rd-clubs__ball {
  position: absolute;
  top: max(-15px, -2.17cqw);
  right: min(30px, 5%);
  width: min(136px, 19%);
  height: auto;
  transform: rotate(0deg);
  opacity: 1;
}

.rd-clubs__img {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin-top: 75px;
}

/* ===== Schedule section ===== */
.rd-schedule {
  padding: 30px 20px clamp(6px, 1.8vw, 12px);
  background: #f9ede5;
}

.rd-schedule__inner {
  container-type: inline-size;
  max-width: 1260px;
  margin: 0 auto;
  text-align: center;
}

.rd-schedule__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.rd-schedule__note {
  font-size: 1.8rem;
  color: #231815;
  text-align: center;
  margin-bottom: 20px;
}

.rd-schedule__flag {
  position: absolute;
  left: max(-16px, -1.27cqw);
  bottom: max(-27px, -2.14cqw);
  width: min(149px, 11.8cqw);
  height: auto;
}

.rd-schedule__tag {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  padding: 0 min(56px, 6.2cqw);
  height: var(--tagHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  margin: 0;
}

.rd-schedule__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(6px, -6px);
  z-index: -1;
}

.rd-schedule__tag-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-schedule__tag-line--top,
.rd-schedule__tag-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-schedule__tag-line--top {
  top: 0;
}

.rd-schedule__tag-line--bottom {
  bottom: 0;
}

.rd-schedule__tag-line--left,
.rd-schedule__tag-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-schedule__tag-line--left {
  left: 0;
}

.rd-schedule__tag-line--right {
  right: 0;
}

.rd-schedule__ribbon {
  position: absolute;
  right: 0;
  bottom: max(-36px, -2.86cqw);
  width: min(229px, 18.2cqw);
  height: auto;
}

.rd-schedule__table {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1260px;
  margin: 0 auto;
}

.rd-schedule__month-group {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.rd-schedule__month-wrap {
  position: relative;
  flex: 1 1 204px;
  min-width: 0;
  max-width: min(204px, 16.2cqw);
  container-type: inline-size;
}

.rd-schedule__month-bg {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 14px;
  z-index: 1;
}

.rd-schedule__month-fill {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: #edd2c3;
  border-radius: 14px;
  transform: translate(7px, -7px);
  z-index: 2;
}

.rd-schedule__month-ring {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid #231815;
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
}

.rd-schedule__month-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(4rem, 19.4cqw);
  font-weight: 400;
  color: #231815;
  z-index: 4;
}

.rd-schedule__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rd-schedule__row {
  display: flex;
  gap: 20px;
}

.rd-schedule__row--single .rd-schedule__cell {
  flex: 0 1 calc(50% - 10px);
}

.rd-schedule__cell {
  flex: 1;
  box-sizing: border-box;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #231815;
  border-radius: 10px;
  padding: 0 12px;
  font-size: min(2.4rem, 1.9cqw);
  font-weight: normal;
  color: #231815;
}

.rd-schedule__dow {
  font-size: min(1.8rem, 1.43cqw);
  font-weight: normal;
  margin: 0 6px;
}

/* ===== Result section ===== */
.rd-result {
  position: relative;
  padding: 30px 20px calc(clamp(40px, 12vw, 100px) + var(--archH));
  background: #f9ede5;
  overflow: hidden;
}

.rd-result::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--archH);
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.rd-result__inner {
  container-type: inline-size;
  max-width: 1278px;
  margin: 0 auto;
}

.rd-result__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.rd-result__uniform {
  position: absolute;
  left: max(-40px, -3.13cqw);
  top: max(-15px, -1.17cqw);
  width: min(184px, 14.4cqw);
  height: min(168px, 13.15cqw);
  transform: rotate(-12deg);
}

.rd-result__tag {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  padding: 0 min(56px, 6.2cqw);
  height: var(--tagHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  margin: 0;
}

.rd-result__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(7px, -7px);
  z-index: -1;
}

.rd-result__tag-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-result__tag-line--top,
.rd-result__tag-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-result__tag-line--top {
  top: 0;
}

.rd-result__tag-line--bottom {
  bottom: 0;
}

.rd-result__tag-line--left,
.rd-result__tag-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-result__tag-line--left {
  left: 0;
}

.rd-result__tag-line--right {
  right: 0;
}

.rd-result__box {
  box-sizing: border-box;
  width: 100%;
  min-height: min(469px, 36.7cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #231815;
  border-radius: 16px;
  padding: min(40px, 6.6cqw);
  text-align: center;
}

.rd-result__text {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.11em;
  color: #231815;
}

/* ===== DecaBeat section ===== */
.rd-decabeat {
  position: relative;
  padding: clamp(0px, 0.8vw, 4px) 20px 60px;
  background: #fff;
}

.rd-decabeat__inner {
  container-type: inline-size;
  max-width: 1278px;
  margin: 0 auto;
}

.rd-decabeat__banner {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(-1 * var(--archH) - clamp(30px, 10vw, 80px)) auto 40px;
}

.rd-decabeat__lead {
  text-align: center;
  margin-bottom: 40px;
}

.rd-decabeat__lead p {
  font-size: clamp(16px, calc(0.5203vw + 12.01px), 22px);
  font-weight: 500;
  line-height: 2.24;
  letter-spacing: 0.24em;
  color: #231815;
  text-align: center;
  margin-bottom: 12px;
}

.rd-decabeat__lead p.rd-decabeat__note {
  font-size: clamp(11.2px, calc(0.59028vw + 6.667px), 18px);
  font-weight: 500;
  line-height: 2.12;
  letter-spacing: 0.07em;
  color: #231815;
  text-align: center;
  margin-top: 20px;
}

.rd-decabeat__tag {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: fit-content;
  height: var(--tagHeight);
  padding: 0 min(56px, 6.2cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tagFontSize);
  font-weight: 500;
  color: #231815;
  margin: 0 auto 40px;
}

.rd-decabeat__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #edd2c3;
  transform: translate(6px, -6px);
  z-index: -1;
}

.rd-decabeat__tag-line {
  position: absolute;
  background: #231815;
  pointer-events: none;
}

.rd-decabeat__tag-line--top,
.rd-decabeat__tag-line--bottom {
  left: -6px;
  right: -6px;
  height: 2px;
}

.rd-decabeat__tag-line--top {
  top: 0;
}

.rd-decabeat__tag-line--bottom {
  bottom: 0;
}

.rd-decabeat__tag-line--left,
.rd-decabeat__tag-line--right {
  top: -6px;
  bottom: -6px;
  width: 2px;
}

.rd-decabeat__tag-line--left {
  left: 0;
}

.rd-decabeat__tag-line--right {
  right: 0;
}

.rd-decabeat__unit {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.rd-decabeat__photo {
  display: block;
  flex: 1 0.6 560px;
  min-width: 0;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.rd-decabeat__unit-body {
  container-type: inline-size;
  flex: 1 1.8 300px;
  min-width: 0;
}

.rd-decabeat__logo {
  display: block;
  width: clamp(140px, 85cqw, 320px);
  max-width: 100%;
  height: auto;
  margin: 0 0 40px;
}

.rd-decabeat__unit-text {
  font-size: clamp(16px, calc(0.3469vw + 13.34px), 20px);
  font-weight: 500;
  line-height: 2.24;
  letter-spacing: 0.24em;
  color: #231815;
}

.rd-decabeat__box {
  box-sizing: border-box;
  width: 100%;
  min-height: min(469px, 36.7cqw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #231815;
  border-radius: 16px;
  padding: min(40px, 6.6cqw);
  text-align: center;
  margin-bottom: 0;
}

.rd-decabeat__coming {
  font-size: 4rem;
  color: #231815;
  margin-bottom: 8px;
}

.rd-decabeat__coming-note {
  font-size: 1.8rem;
  color: #231815;
}

.rd-decabeat__schedule {
  text-align: center;
  margin: 0;
  padding: min(50px, 3.912cqw) 0 min(88px, 6.885cqw);
}

.rd-decabeat__schedule-badge {
  display: block;
  width: 560px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.rd-decabeat__footer {
  margin-top: 0;
  text-align: center;
}

.rd-decabeat__footer-logo {
  display: block;
  width: 200px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 16px;
}

.rd-decabeat__footer-text {
  font-size: 1.4rem;
  color: #231815;
  text-align: center;
  margin-bottom: 24px;
}

.rd-decabeat__footer-link {
  color: var(--rdBlue);
  text-decoration: underline;
  word-break: break-all;
}

.rd-decabeat__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.rd-decabeat__sns img {
  display: block;
  height: 40px;
  width: auto;
}

.footer-wrap {
  margin-top: 0;
}

/* ===== Responsive (SP) ===== */
@media screen and (max-width: 767px) {
  .br-sp-only {
    display: block;
  }

  .br-pc-only {
    display: none;
  }

  /* Hero */
  .rd-hero {
    padding-top: 40px;
    padding-bottom: calc(clamp(20px, 5.24vw, 40px) + var(--archH));
  }

  .rd-hero__inner {
    flex-direction: column;
    gap: 32px;
  }

  .rd-hero__body {
    display: none;
  }

  .rd-hero__visual {
    display: none;
  }

  .rd-hero__mobile {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .rd-hero__mobile-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .rd-hero__mobile-col--right {
    margin-top: 36px;
  }

  .rd-hero__mobile-photo {
    display: block;
    max-width: none;
    height: auto;
  }

  /* Each source image has a different amount of decorative padding
     around the actual arch photo, so widths are tuned individually
     (as a % of viewport, scaled from a 227/188/174px baseline at
     375px) to make the arch itself render at a matching size across
     iPhone widths instead of leaving a fixed-px gap on larger phones. */
  .rd-hero__mobile-photo--1 {
    width: 46.3vw;
  }

  .rd-hero__mobile-photo--2 {
    width: 38.3vw;
  }

  .rd-hero__mobile-photo--3 {
    width: 35.5vw;
    margin-top: 50px;
  }

  .rd-hero__mobile-logo {
    display: block;
    width: 80%;
    max-width: 180px;
    height: auto;
    margin: 20px 0;
  }

  .rd-hero__mobile-text {
    margin-top: 20px;
  }

  .rd-hero__mobile-text p {
    font-size: clamp(8px, calc(1.02vw + 4.17px), 12px);
    font-weight: 500;
    line-height: 1.94;
    letter-spacing: 0.08em;
    color: #231815;
    text-align: left;
    margin: 0 0 16px;
  }

  .rd-hero__mobile-text p:last-child {
    margin-bottom: 0;
  }

  /* About / Clubs / Schedule */
  .rd-about,
  .rd-clubs,
  .rd-schedule {
    padding-top: 40px;
    padding-right: 16px;
    padding-left: 16px;
  }

  /* The desktop-only gradual-shrink max-width on .rd-about__inner would
     otherwise also shrink the container that .rd-about__tag's cqw
     sizing below is calibrated against; pin it back to its flat,
     never-binding-on-mobile value so that calibration still holds. */
  .rd-about__inner {
    max-width: 900px;
  }

  /* The desktop tag sizing (min(px, vw/cqw)) assumes a wide container,
     so on a narrow phone viewport it collapses to an unreadably tiny
     size — give it its own comfortable, mildly-responsive sizing. */
  /* cqw (% of .rd-about__inner) instead of vw, calibrated to match
     the layout exactly at a 387px-wide phone, so it keeps the same
     proportions while growing. Capped at the size it reaches by a
     600px-wide screen (min() against that fixed px value) so it
     stops growing larger beyond that instead of feeling oversized
     at wider phones/tablets. */
  .rd-about__tag {
    width: fit-content;
    height: var(--tagHeight);
    padding: 0 min(44.8px, 7.89cqw);
  }

  .rd-about__tag-line--top,
  .rd-about__tag-line--bottom,
  .rd-about__battle-lead-line--top,
  .rd-about__battle-lead-line--bottom,
  .rd-clubs__tag-line--top,
  .rd-clubs__tag-line--bottom,
  .rd-decabeat__tag-line--top,
  .rd-decabeat__tag-line--bottom,
  .rd-result__tag-line--top,
  .rd-result__tag-line--bottom,
  .rd-schedule__tag-line--top,
  .rd-schedule__tag-line--bottom {
    height: 1px;
  }

  .rd-about__tag-line--left,
  .rd-about__tag-line--right,
  .rd-about__battle-lead-line--left,
  .rd-about__battle-lead-line--right,
  .rd-clubs__tag-line--left,
  .rd-clubs__tag-line--right,
  .rd-decabeat__tag-line--left,
  .rd-decabeat__tag-line--right,
  .rd-result__tag-line--left,
  .rd-result__tag-line--right,
  .rd-schedule__tag-line--left,
  .rd-schedule__tag-line--right {
    width: 1px;
  }

  .rd-about__tag::before,
  .rd-about__battle-lead::before,
  .rd-clubs__tag::before,
  .rd-decabeat__tag::before,
  .rd-result__tag::before,
  .rd-schedule__tag::before {
    transform: translate(3px, -3px);
  }

  .rd-about__grid {
    gap: clamp(15px, calc(2.237vw + 7.842px), 25px);
  }

  .rd-about__card {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .rd-about__card img {
    width: 151px;
    max-width: 100%;
  }

  .rd-clubs__inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .rd-clubs__left {
    container-type: inline-size;
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .rd-clubs__left picture {
    order: 2;
    display: block;
  }

  /* Pure %-of-container (cqw) sizing, calibrated so the bubble matches
     its tuned size at a ~430px phone and keeps scaling up on wider
     phones (up to the 767px breakpoint) instead of staying capped.
     The left offset is derived as "container - width - 6px", so the
     right edge always stays 6px inside the container at any size. */
  .rd-clubs__bubble {
    width: 38cqw;
    max-width: 38cqw;
    margin: 0 0 -6px calc(100cqw - 38cqw - 6px);
  }

  .rd-clubs__highlight--pc {
    display: none;
  }

  .rd-clubs__highlight--sp {
    order: 1;
    display: block;
    text-align: center;
    font-size: 4vw;
    margin: 0 0 16px;
  }

  .rd-clubs__highlight--sp .rd-clubs__highlight-main {
    display: inline;
    font-size: 4vw;
    white-space: normal;
    background: #edd2c3;
    padding: 2px 6px;
  }

  .rd-clubs__right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 692px;
  }

  .rd-clubs__img {
    width: 85%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* The desktop tag sizing (min(px, vw/cqw)) assumes a wide container,
     so it collapses to an unreadably tiny size on a phone viewport. */
  .rd-clubs__tag {
    top: 0;
    width: fit-content;
    height: var(--tagHeight);
    padding: 0 min(44.8px, calc(7.89vw - 3.78px));
    margin: 0 auto 15px;
  }

  .rd-clubs__ball {
    display: none;
  }

  /* Keep the same row-based structure as PC (flag/tag/ribbon in a row,
     month box beside the rows, two cells per row) instead of switching
     to a stacked layout. Sizes are cqw (% of this container), calibrated
     to match the 55px/130px spec exactly at a 375px-wide screen (343px
     container), then scale proportionally so the same layout keeps
     fitting at other phone widths instead of overflowing or shrinking
     to the desktop formulas' unreadably tiny size. */
  .rd-schedule__head {
    margin-bottom: 40px;
  }

  .rd-schedule__tag {
    width: fit-content;
    height: var(--tagHeight);
    padding: 0 min(44.8px, calc(7.89vw - 3.78px));
  }

  .rd-schedule__flag {
    left: 1.7cqw;
    bottom: -3.4cqw;
    width: 14.3cqw;
  }

  .rd-schedule__ribbon {
    right: 2.5cqw;
    bottom: -4.2cqw;
    width: 19.4cqw;
  }

  .rd-schedule__month-group {
    gap: 2.92cqw;
  }

  .rd-schedule__month-wrap {
    flex: 0 0 16.03cqw;
    max-width: 16.03cqw;
  }

  .rd-schedule__month-label {
    /* This cqw is relative to .rd-schedule__month-wrap's own
       container (it sets container-type itself), not the table. */
    font-size: 34cqw;
  }

  .rd-schedule__rows {
    gap: 2.33cqw;
  }

  .rd-schedule__row {
    gap: 2.33cqw;
  }

  .rd-schedule__cell {
    flex: 0 0 37.9cqw;
    width: 37.9cqw;
    height: 9cqw;
    padding: 0 1.75cqw;
    border-width: 1px;
    border-radius: 8px;
    font-size: 2.6cqw;
  }

  .rd-schedule__month-ring {
    border-width: 1px;
  }

  .rd-schedule__dow {
    font-size: 2.1cqw;
    margin: 0 0.58cqw;
  }

  /* Everything below is sized in cqw (% of .rd-result__inner, same
     container .rd-result__uniform's own formula already uses),
     calibrated to match the layout exactly at a 387px-wide phone,
     so the tag size, the tag-to-box gap and the icon's overlap into
     the box all keep the same proportions at any width instead of
     drifting apart as the screen gets wider. */
  .rd-result__head {
    margin-bottom: 5.63cqw;
  }

  .rd-result__uniform {
    top: 8.75cqw;
  }

  .rd-result__tag {
    width: fit-content;
    height: var(--tagHeight);
    padding: 0 min(44.8px, calc(7.89vw - 3.78px));
  }

  .rd-result__box {
    min-height: max(200px, 36.7cqw);
    padding: max(36px, 6.6cqw) max(20px, 3.6cqw);
    border-width: 1px;
  }

  .rd-result__text {
    font-size: clamp(9px, calc(1.276vw + 7.215px), 17px);
    text-align: center;
  }

  .rd-decabeat {
    padding-right: 16px;
    padding-bottom: 40px;
    padding-left: 16px;
  }

  .rd-decabeat__banner {
    margin-top: calc(-1 * var(--archH) - clamp(10px, 7vw, 60px));
    margin-bottom: 24px;
  }

  .rd-decabeat__lead p {
    font-size: clamp(10px, calc(1.276vw + 6.215px), 16px);
    line-height: 2.06;
  }

  .rd-decabeat__lead p.rd-decabeat__note {
    font-size: clamp(7px, calc(1.0714vw + 2.982px), 11.2px);
    line-height: 2.01;
  }

  .rd-decabeat__tag {
    width: fit-content;
    height: auto;
    min-height: min(64px, calc(11.27vw - 5.4px));
    padding: min(12.78px, calc(2.25vw - 1.08px)) min(44.8px, calc(7.89vw - 3.78px));
    white-space: normal;
    text-align: center;
    margin: 0 auto 24px;
  }

  .rd-decabeat__tag--single {
    height: var(--tagHeight);
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .rd-decabeat__unit {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  .rd-decabeat__photo {
    flex: none;
    width: 85%;
    margin: 0 auto;
  }

  .rd-decabeat__sp-photo {
    width: 70%;
    margin: 0 auto;
    border-radius: 8px;
  }

  .rd-decabeat__unit-body {
    flex: none;
    width: 100%;
  }

  .rd-decabeat__logo {
    width: 200px;
    margin: 0 auto 24px;
  }

  .rd-decabeat__unit-text {
    font-size: clamp(10px, calc(1.276vw + 6.215px), 16px);
    line-height: 2.06;
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }

  .rd-decabeat__box {
    padding: max(24px, 4.4cqw) max(20px, 3.6cqw);
    border-width: 1px;
  }

  .rd-decabeat__schedule {
    padding: clamp(10px, calc(1.342vw + 5.706px), 16px) 0 clamp(18px, calc(2.46vw + 10.128px), 29px);
  }

  .rd-decabeat__coming {
    font-size: 2.2rem;
  }

  .rd-decabeat__schedule-badge {
    width: 80%;
  }

  .rd-decabeat__footer {
    margin-top: 0;
  }

  .rd-decabeat__footer-logo {
    width: 150px;
    margin-bottom: 12px;
  }

  .rd-decabeat__footer-text {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  .rd-decabeat__sns {
    gap: 16px;
  }

  .rd-decabeat__sns img {
    height: 32px;
  }

  /* cqw (% of .rd-about__battle) instead of vw, calibrated to match
     the layout exactly at a 387px-wide phone. Font/padding/min-height
     cap at the size they reach by a 600px-wide screen so the text
     stops growing larger beyond that, but max-width is left uncapped
     so the box itself keeps widening with the screen. */
  .rd-about__battle-lead {
    width: fit-content;
    max-width: 94.37cqw;
    height: var(--tagHeightLead);
    text-align: center;
    padding: 0 min(25.6px, 4.51cqw);
  }

  .rd-about__battle-title {
    margin-bottom: 16px;
  }

  .rd-about__battle-desc {
    font-size: clamp(9px, 2.67vw, 15px);
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  .rd-about__battle-note {
    font-size: clamp(7px, calc(1.0714vw + 2.982px), 11.2px);
    line-height: 2.01;
  }

  .rd-about__battle-lead-line--top,
  .rd-about__battle-lead-line--bottom {
    left: -5px;
    right: -5px;
  }

  .rd-about__battle-lead-line--left,
  .rd-about__battle-lead-line--right {
    top: -5px;
    bottom: -5px;
  }

  .rd-about__steps {
    flex-direction: column;
    gap: 20px;
  }

  .rd-about__step {
    flex: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* Sized as a % of the 375px baseline viewport so the row scales
     with the phone's screen size instead of staying fixed. */
  .rd-about__step-num-wrap {
    left: 4.53vw;
    width: 9.6vw;
    transform: translate(-15%, -25%);
  }

  .rd-about__step-body {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6.4vw;
  }

  .rd-about__step-visual {
    flex: none;
    width: 34.67vw;
    aspect-ratio: 130 / 112;
    height: auto;
    min-width: 0;
    padding: 8px 6px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #231815;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  }

  .rd-about__step-num-ring {
    border-width: 1px;
  }

  .rd-about__step-text {
    flex: none;
    width: 41.33vw;
    aspect-ratio: 155 / 77;
    height: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #edd2c3;
    border-radius: 16px;
    padding: 8px 14px;
    font-size: 2.77vw;
    text-align: center;
  }

  /* Step 2: text on the left, icon on the right */
  .rd-about__step:nth-child(2) .rd-about__step-body {
    flex-direction: row-reverse;
  }

  /* The badge marks the icon, so for step 2 (icon on the right)
     move it to the icon's own top-left corner: the centering margin
     plus the text width plus the gap. */
  .rd-about__step:nth-child(2) .rd-about__step-num-wrap {
    left: 52.27vw;
    transform: translate(-15%, -25%);
  }

}

/* PC only: give the section-bottom spacing more room than the
   shared mobile-first clamp() provides. */
@media screen and (min-width: 768px) {
  .rd-clubs {
    padding-bottom: clamp(30px, 3vw, 45px);
  }

  .rd-about {
    padding-bottom: clamp(30px, 3vw, 45px);
  }

  .rd-schedule {
    padding-bottom: clamp(30px, 3vw, 45px);
  }

  .rd-about__battle-lead {
    margin-bottom: clamp(30px, 3vw, 45px);
  }
}