@charset "UTF-8";

:root {
  --c-text: #000000;
  --c-cream: #f5eed2;
  --c-pink: #e05157;
  --c-red: #e05157;
  --c-gold: #be9318;
  --c-gold-badge: #b8952f;
  --c-blue: #5abce2;
  --c-green: #6db04a;
  --c-orange: #ff9c2e;
  --c-card-pink: #fff3e7;
  --c-card-blue: #dff2fa;
  --c-card-orange: #fdf0e3;
  --c-card-green: #e8f3dd;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  --inner: min(1040px, calc(100% - 40px));
}

a {
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

html {
  overflow-x: clip;
}

body {
  background: #fff;
  color: var(--c-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-width: none;
}

.punct {
  margin-right: -0.5em;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  pointer-events: none;
}

.header::before {
  content: "";
  position: absolute;
  width: min(442px, 30.7vw);
  height: min(200px, 13.9vw);
  background: url(../img/deco/cloud-white-logo.svg) no-repeat left top / contain;
}
.header__logo {
  position: relative;
  width: min(284px, 19.72vw);
  margin: min(30px, 2.08vw) 0 0 min(30px, 2.08vw);
  pointer-events: auto;
}
.header__logo img {
  width: 100%;
}

.kv {
  position: relative;
  height: min(780px, 54.17vw);
  background: var(--c-cream);
}
.kv__photo {
  position: absolute;
  inset: 0;
}
.kv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv__title {
  position: absolute;
  top: min(24px, 1.67vw);
  left: calc(50% - min(296px, 20.56vw));
  width: min(581px, 40.35vw);
  aspect-ratio: 581 / 309;
}

.kv__title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kv__lead {
  position: absolute;
  display: grid;
  place-items: center;
  top: min(325px, 22.57vw);
  left: calc(50% - min(318px, 22.08vw));
  width: min(640px, 44.44vw);
  height: min(60px, 4.17vw);
  border-radius: 40px;
  background: var(--c-pink);
  color: #fff;
  font-weight: 700;
  font-size: min(30px, 2.08vw);
  line-height: 1;
  text-align: center;
}

.kv__bubble {
  position: absolute;
  top: min(190px, 13.19vw);
  right: max(-52px, -3.74vw);
  width: min(389px, 27.01vw);
  aspect-ratio: 389 / 263;
}

.kv__bubble-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kv__band {
  left: 0;
  bottom: 0;
  width: 100%;
  object-fit: fill;
}

.kv__ume {
  top: auto;
  bottom: min(138px, 9.58vw);
  left: calc(50% - min(258px, 17.92vw));
  width: min(77px, 5.35vw);
}

.kv__kasumi-w {
  top: auto;
  bottom: min(28px, 1.94vw);
  right: min(18px, 1.25vw);
  width: min(138px, 9.58vw);
}

.kv__date {
  position: absolute;
  bottom: min(20px, 1.39vw);
  left: min(80px, 5.56vw);
  display: flex;
  align-items: center;
  gap: min(13px, 0.9vw);
}

.kv__date-badge {
  display: grid;
  place-items: center;
  width: min(100px, 6.94vw);
  height: min(100px, 6.94vw);
  border-radius: 50%;
  background: #97d4ec;
  color: #000000;
  font-size: min(20px, 1.39vw);
  font-weight: 500;
  line-height: 1.2;
}

.kv__date-main {
  font-weight: bold;
  font-size: min(40px, 2.78vw);
  line-height: 1;
  letter-spacing: 0.02em;
}

.kv__date-main span {
  font-size: min(30px, 2.08vw);
}

.kv__date-note {
  margin-top: min(10px, 0.69vw);
  font-size: min(22px, 1.53vw);
  line-height: 1;
  font-weight: bold;
}

.intro {
  position: relative;
  padding-bottom: 439px;
  margin-bottom: -130px;
  background: var(--c-cream);
}

.intro__inner {
  position: relative;
  width: var(--inner);
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}

.intro__cloud {
  top: 53px;
  left: -340px;
  width: 680px;
}

.events .event__seigaiha {
  background-repeat: no-repeat;
  background-position: left top;
}

.intro__seigaiha-r {
  top: 144px;
  right: min(0px, calc(-310px + (100vw - 1440px) / 2));
  width: 662px;
  height: 200px;
  background: url(../img/deco/seigaiha-cream-1.webp) no-repeat left top / 662px
    200px;
}

.intro__seigaiha-l {
  top: 555px;
  left: -218px;
  width: 662px;
  height: 200px;
  background: url(../img/deco/seigaiha-cream-2.webp) no-repeat left top / 662px
    200px;
}

.intro__fan {
  top: 20px;
  left: 130px;
  width: 122px;
}

.intro__ttl {
  font-size: 42px;
  font-weight: bold;
  line-height: 1;
}

.intro__ttl span {
  font-size: 36px;
}

.intro__ttl::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin: 40px auto;
  background: var(--c-gold);
}

.intro__txt {
  font-size: 18px;
  line-height: 2.4;
  font-weight: 500;
}

.intro__hariko {
  top: 499px;
  left: 820px;
  width: 101px;
}

.intro__kasumi {
  top: 571px;
  left: 683px;
  width: 120px;
}

.intro__ume-red {
  top: 606px;
  left: 921px;
  width: 80px;
}

.intro__ume-gold {
  top: 661px;
  left: 809px;
  width: 120px;
  z-index: 2;
}

.intro__band {
  top: auto;
  bottom: -210px;
  left: min(0px, calc(50% - 828px));
  width: max(1838px, 100%);
  height: auto;
  z-index: 1;
}

.events {
  position: relative;
  z-index: 1;
  width: var(--inner);
  margin: 0 auto;
}

.events__head {
  position: relative;
  text-align: center;
}

.events__sub {
  position: absolute;
  top: -112px;
  left: 172px;
}

.events__ttl {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 503px;
  height: 100px;
  background: url(../img/deco/title-scallop.svg) no-repeat center;
  color: #fff;
  font-weight: 500;
  font-size: 70px;
  line-height: 1;
  padding-bottom: 10px;
}

.events__ttl span {
  font-size: 56px;
}

.event {
  position: relative;
}

.event--01 {
  margin-top: 90px;
}

.event--02 {
  margin-top: 170px;
}

.event--03 {
  margin-top: 223px;
}

.event--04 {
  margin-top: 190px;
}

.event__card {
  position: relative;
  z-index: 1;
  padding: 60px 40px 40px 38px;
  border-radius: 30px;
  background: var(--card-bg);
}

.event--right .event__card {
  width: 580px;
  margin-left: auto;
}

.event--01 .event__card {
  min-height: 788px;
}

.event--02 .event__card {
  width: 608px;
  min-height: 565px;
}

.event--03 .event__card {
  min-height: 544px;
}

.event--04 .event__card {
  width: 582px;
  min-height: 454px;
}

.event__ttl {
  position: absolute;
  top: -36px;
  left: 40px;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  z-index: 2;
}

.event__badge {
  background-image: url(../img/deco/badge-bg.webp);
  background-size: 100% 100%;
  position: absolute;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.event--01 .event__badge {
  top: -99px;
  left: 481px;
}

.event--02 .event__badge {
  top: -50px;
  left: 395px;
}

.event--03 .event__badge {
  top: -101px;
  left: 450px;
}

.event--04 .event__badge {
  top: -53px;
  left: 450px;
}

.event__lead {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.event__txt {
  margin-top: 30px;
  font-size: 18px;
  line-height: 1.8;
}

.event__info {
  margin-top: 30px;
}

.event__info > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.event__info > div + div {
  margin-top: 30px;
}

.event__info dt {
  flex: none;
  width: 80px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid var(--accent-line);
  background: #fff;
  color: var(--accent-line);
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event__info dd {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
}

.event__info small {
  font-size: 14px;
  line-height: 1.8;
}

.event__info small.is-block {
  display: block;
  line-height: 1.9;
}

.event--03 .event__info small {
  font-size: 10px;
}

.event--03 .event__info > div:last-child dd {
  font-size: 16px;
}

.event__box {
  margin-top: 30px;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
}

.event__box-ttl {
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
}

.event__box .event__info > div + div {
  margin-top: 10px;
}

.event__notes {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.event__notes li {
  position: relative;
  padding-left: 1.4em;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.event__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
}

.event__notes li + li {
  margin-top: 8px;
}

.event--pink {
  --accent: #e05157;
  --accent-line: #e05157;
  --card-bg: var(--c-card-pink);
}

.event--blue {
  --accent: var(--c-blue);
  --accent-line: #5abce2;
  --card-bg: var(--c-card-blue);
}

.event--orange {
  --accent: var(--c-orange);
  --accent-line: #ff9c2e;
  --card-bg: var(--c-card-orange);
}

.event--green {
  --accent: var(--c-green);
  --accent-line: #7bbb59;
  --card-bg: var(--c-card-green);
}

.event__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.event__img {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
}

.event__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event--01 .event__img--main {
  top: 42px;
  left: 22px;
  width: 560px;
  height: 551px;
}

.event--01 .event__img--sub {
  top: 516px;
  left: -15px;
  width: 296px;
  height: 296px;
}

.event--01 .event__shippo {
  width: 96px;
  z-index: 2;
}
.event__shippo--1 {
  top: 5px;
  left: -78px;
}

.event__shippo--2 {
  top: 53px;
  left: 70px;
}

.event__shippo--3 {
  top: 153px;
  left: -31px;
}

.event--01 .event__kasumi {
  top: 513px;
  right: -61px;
  width: 160px;
  z-index: 2;
}

.event--02 .event__seigaiha {
  top: -132px;
  left: calc(50% - 50vw - 372px);
  width: 662px;
  height: 200px;
  background-image: url(../img/deco/seigaiha-white-1.webp);
  background-size: 662px 200px;
}

.event--02 .event__img--sub {
  top: -92px;
  right: -22px;
  width: 300px;
  height: 295px;
  z-index: 3;
}

.event--02 .event__img--main {
  top: 121px;
  right: 18px;
  width: 540px;
  height: 515px;
  z-index: 2;
}

.event--02 .event__kasumi {
  top: 416px;
  left: -118px;
  width: 134px;
  z-index: 3;
}

.event--03 .event__ttl {
  font-feature-settings: "palt";
}

.event--03 .event__img--main {
  top: -100px;
  left: 32px;
  width: 526px;
  height: 540px;
}

.event--03 .event__img--sub {
  top: 280px;
  left: -20px;
  width: 301px;
  height: 300px;
}

.event--03 .event__paws {
  top: 428px;
  left: 360px;
  width: 127px;
  z-index: 2;
}

.event--04 .event__img--sub {
  top: -138px;
  right: -22px;
  width: 290px;
  height: 290px;
}
.event--04 .event__img--main {
  top: 68px;
  right: 20px;
  width: 480px;
  height: 480px;
  z-index: 2;
}
.event--04 .event__bone {
  top: 285px;
  left: 360px;
  width: 80px;
  z-index: 2;
}
.event--04 .event__seigaiha {
  top: 394px;
  right: calc(50% - 50vw - 295px);
  width: 662px;
  height: 200px;
  background-image: url(../img/deco/seigaiha-white-2.webp);
  background-size: 662px 200px;
  z-index: -1;
}

.other {
  position: relative;
  margin-top: 106px;
  padding: 60px 60px 66px 60px;
  border-radius: 22px;
  background: var(--c-cream);
}

.other__ume-gold {
  top: -51px;
  left: 80px;
  width: 116px;
}

.other__ume-red {
  top: 35px;
  left: -18px;
  width: 79px;
}

.other__ttl {
  text-align: center;
}

.other__ttl span {
  display: inline-block;
  background: url(../img/deco/other-bubble.svg) no-repeat center;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  line-height: 1;
  padding: 15px 40px 29px 40px;
}

.other__body {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

.other__txt {
  width: 520px;
}

.other__list {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}

.other__list li::before {
  content: "・";
  margin-right: 0.4em;
}

.other__list small {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
}

.other__txt p {
  margin-top: 43px;
  font-size: 16px;
  line-height: 2;
}
.other__img {
  width: 361px;
  height: 241px;
  margin-top: 4px;
  border-radius: 10px;
  overflow: hidden;
}

.other__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  position: relative;
  padding: 230px 0 104px;
  background: linear-gradient(transparent 6.95vw, var(--c-cream) 6.95vw);
}

.info__band {
  top: 0;
  left: 0;
  width: 100%;
  object-fit: fill;
}

.info__seigaiha-r {
  top: 138px;
  right: -173px;
  width: 662px;
  height: 200px;
  background: url(../img/deco/seigaiha-cream-3.webp) no-repeat left top / 662px
    200px;
}

.info__seigaiha-l {
  left: -49px;
  bottom: 0;
  width: 662px;
  height: 200px;
  background: url(../img/deco/seigaiha-cream-4.webp) no-repeat left top / 662px
    200px;
}

.info__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: var(--inner);
  margin: 0 auto;
}

.info__cat {
  top: -98px;
  left: -29px;
  width: 56px;
}

.info__card {
  position: relative;
  width: 480px;
  min-height: 342px;
  padding: 30px 50px 40px 50px;
  border: 5px solid #be9318;
  border-radius: 22px;
  background: #fff;
}

.info__card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #be9318;
  border-radius: 20px;
  pointer-events: none;
}

.info__ttl {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.info__ttl::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin: 20px auto;
  background: #be9318;
}

.info__txt {
  margin-top: 16px;
  line-height: 1.8;
  font-weight: 500;
}

.info__btn {
  position: relative;
  display: block;
  max-width: 248px;
  width: 100%;
  margin: 20px auto 0 auto;
  border-radius: 30px;
  background: linear-gradient(135deg, #bd872b 0%, #bea100 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: opacity 0.3s;
  padding: 15px 20px;
}
.info__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 7px;
  background: url(../img/deco/info-arrow.svg) no-repeat center / contain;
  transform: translateY(-50%);
}

.info__btn:hover {
  opacity: 0.8;
}

.info__pet {
  position: relative;
}
.info__card--pet .info__txt {
  width: 190px;
  margin-left: 6px;
}
.info__pet-img {
  position: absolute;
  top: 0;
  left: 196px;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  overflow: hidden;
}
.info__pet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info__monkey {
  top: 135px;
  left: 180px;
  width: 98px;
}

.footer {
  position: relative;
  height: 337px;
  background: url(../img/footer.webp) no-repeat center / cover;
  color: #fff;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}
.footer__catch {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.footer__copy {
  position: absolute;
  right: 30px;
  bottom: 20px;
  font-size: 12px;
}

@media (min-width: 1500px) {
  .kv {
    height: 54.17vw;
  }
  .kv__ume {
    bottom: 9.58vw;
    left: 32.08vw;
  }
}

/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
  :root {
    --inner: min(720px, calc(100% - 64px));
  }
  .intro__inner {
    padding-top: 80px;
  }
  .intro__fan {
    top: 10px;
    left: calc(50% - 300px);
    width: 100px;
  }
  .intro__ttl {
    font-size: 34px;
  }
  .intro__ttl span {
    font-size: 28px;
  }
  .intro__txt {
    font-size: 16px;
    line-height: 2.2;
  }
  .intro__hariko {
    top: auto;
    bottom: -90px;
    left: auto;
    right: 14%;
    width: 80px;
  }
  .intro__kasumi {
    top: auto;
    bottom: -60px;
    left: auto;
    right: 30%;
    width: 96px;
  }
  .intro__ume-red {
    top: auto;
    bottom: -130px;
    left: auto;
    right: 4%;
    width: 64px;
  }
  .intro__ume-gold {
    top: auto;
    bottom: -190px;
    left: auto;
    right: 18%;
    width: 96px;
  }
  .events__sub {
    top: -100px;
    left: calc(50% - 300px);
    width: 210px;
  }
  .events__sub img {
    width: 100%;
    height: auto;
  }
  .events__ttl {
    width: 420px;
    height: 84px;
    background-size: 100% 100%;
    font-size: 58px;
  }
  .events__ttl span {
    font-size: 46px;
  }
  .event,
  .event--01,
  .event--02,
  .event--03,
  .event--04 {
    margin-top: 100px;
  }
  .event--01 {
    margin-top: 70px;
  }
  .event__media {
    position: relative;
    inset: auto;
    height: 500px;
  }
  .event .event__card,
  .event--right .event__card {
    width: auto;
    min-height: 0;
    margin: 70px 0 0;
    padding: 64px 40px 40px;
  }
  .event .event__img {
    right: auto;
    transform: none;
  }
  .event--01 .event__img--main,
  .event--03 .event__img--main {
    top: 0;
    left: calc(50% - 170px);
    width: 420px;
    height: 420px;
  }
  .event--01 .event__img--sub,
  .event--03 .event__img--sub {
    top: 280px;
    left: calc(50% - 300px);
    width: 220px;
    height: 220px;
    z-index: 1;
  }
  .event--02 .event__img--sub,
  .event--04 .event__img--sub {
    top: 0;
    left: calc(50% + 80px);
    width: 220px;
    height: 220px;
    z-index: 3;
  }
  .event--02 .event__img--main,
  .event--04 .event__img--main {
    top: 80px;
    left: calc(50% - 300px);
    width: 420px;
    height: 420px;
  }
  .event__shippo--1 {
    top: 0;
    left: calc(50% - 340px);
  }
  .event__shippo--2 {
    top: 60px;
    left: calc(50% - 250px);
  }
  .event__shippo--3 {
    top: 150px;
    left: calc(50% - 320px);
  }
  .event--01 .event__kasumi {
    top: 400px;
    right: auto;
    left: calc(50% + 200px);
    width: 140px;
  }
  .event--02 .event__seigaiha {
    top: -60px;
  }
  .event--02 .event__kasumi {
    top: 420px;
    left: calc(50% - 360px);
    width: 120px;
  }
  .event--03 .event__paws {
    top: 420px;
    left: calc(50% - 60px);
    width: 110px;
  }
  .event--04 .event__bone {
    top: 400px;
    left: calc(50% + 160px);
    width: 70px;
  }
  .event--04 .event__seigaiha {
    top: 280px;
  }
  .event__ttl {
    top: -30px;
    left: 32px;
    font-size: 48px;
  }
  .event .event__badge {
    top: -70px;
    left: auto;
    right: 24px;
  }
  .event__lead {
    font-size: 26px;
  }
  .event__txt {
    font-size: 17px;
  }
  .event__txt br {
    display: none;
  }
  .other {
    margin-top: 130px;
    padding: 60px 40px 50px;
  }
  .other__body {
    flex-direction: column;
    gap: 30px;
  }
  .other__txt {
    width: auto;
  }
  .other__img {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 361 / 241;
    margin: 0 auto;
  }
  .info {
    padding: calc(13.89vw + 70px) 0 90px;
  }
  .info__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .info__cat {
    top: -80px;
    left: 0;
  }
  .info__card {
    width: 100%;
    max-width: 560px;
    min-height: 0;
  }
  .info__txt br {
    display: none;
  }
  .info__pet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  .info__card--pet .info__txt {
    flex: 1;
    width: auto;
    max-width: 260px;
    margin: 0;
  }
  .info__pet-img {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    width: 160px;
    height: 160px;
  }
  .info__monkey {
    top: auto;
    bottom: -40px;
    left: auto;
    right: calc(50% - 160px);
    width: 80px;
  }
  .footer {
    height: 260px;
  }
}

/* ---------- SP ---------- */
@media (max-width: 768px) {
  :root {
    --inner: calc(100% - 40px);
  }
  .header::before {
    width: 52vw;
    height: 24vw;
  }
  .header__logo {
    width: 40vw;
    margin: 3.5vw 0 0 3.5vw;
  }
  .kv {
    height: 165vw;
  }
  .kv__photo {
    bottom: 25vw;
  }
  .kv__photo img {
    object-position: center bottom;
  }
  .kv__title {
    top: 21vw;
    left: 9vw;
    width: 82vw;
  }
  .kv__lead {
    top: 66vw;
    left: 6vw;
    width: 88vw;
    height: 9.6vw;
    border-radius: 5vw;
    font-size: 4.2vw;
  }
  .kv__bubble {
    top: 1vw;
    right: -2vw;
    width: 32vw;
  }
  .kv__band {
    bottom: calc(25vw - 1px);
  }
  .kv__ume {
    bottom: 31vw;
    left: 5vw;
    width: 11vw;
  }
  .kv__kasumi-w {
    bottom: 5vw;
    right: 4vw;
    width: 16vw;
  }
  .kv__date {
    bottom: 5vw;
    left: 4vw;
    gap: 2.5vw;
  }
  .kv__date-badge {
    width: 15vw;
    height: 15vw;
    font-size: 3.4vw;
  }
  .kv__date-main {
    font-size: 5.6vw;
  }
  .kv__date-main span {
    font-size: 4.2vw;
  }
  .kv__date-note {
    margin-top: 1.6vw;
    font-size: 3.2vw;
  }
  .intro {
    padding-bottom: 230px;
    margin-bottom: -64px;
  }
  .intro__cloud {
    top: 20px;
    left: -220px;
    width: 340px;
  }
  .intro__seigaiha-r,
  .intro__seigaiha-l {
    display: none;
  }
  .intro__inner {
    padding-top: 70px;
  }
  .intro__fan {
    top: 6px;
    left: 0;
  }
  .intro__ttl {
    font-size: 21px;
  }
  .intro__ttl span {
    font-size: 17px;
  }
  .intro__ttl::after {
    margin: 24px auto;
  }
  .intro__txt {
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }
  .intro__txt br {
    display: none;
  }
  .intro__hariko {
    bottom: -64px;
    right: 22%;
    width: 56px;
  }
  .intro__kasumi {
    bottom: -40px;
    right: 42%;
    width: 64px;
  }
  .intro__ume-red {
    bottom: -90px;
    right: 2%;
    width: 44px;
  }
  .intro__ume-gold {
    bottom: -130px;
    right: 16%;
    width: 64px;
  }
  .intro__band {
    bottom: -103px;
    left: calc(50% - 405px);
    width: 900px;
  }
  .events__sub {
    top: -70px;
    left: 0;
    width: 140px;
  }
  .events__ttl {
    width: 300px;
    height: 60px;
    font-size: 40px;
    padding-bottom: 6px;
  }
  .events__ttl span {
    font-size: 32px;
  }
  .event,
  .event--02,
  .event--03,
  .event--04 {
    margin-top: 80px;
  }
  .event--01 {
    margin-top: 60px;
  }
  .event__media {
    height: 330px;
  }
  .event .event__card,
  .event--right .event__card {
    margin-top: 56px;
    padding: 48px 20px 30px;
    border-radius: 20px;
  }
  .event--01 .event__img--main,
  .event--03 .event__img--main {
    left: calc(50% - 100px);
    width: 260px;
    height: 260px;
  }
  .event--01 .event__img--sub,
  .event--03 .event__img--sub {
    top: 180px;
    left: calc(50% - 165px);
    width: 150px;
    height: 150px;
  }
  .event--02 .event__img--sub,
  .event--04 .event__img--sub {
    left: calc(50% + 15px);
    width: 150px;
    height: 150px;
  }
  .event--02 .event__img--main,
  .event--04 .event__img--main {
    top: 70px;
    left: calc(50% - 165px);
    width: 260px;
    height: 260px;
  }
  .event--01 .event__shippo {
    width: 56px;
  }
  .event__shippo--1 {
    top: -10px;
    left: -8px;
  }
  .event__shippo--2,
  .event__shippo--3 {
    display: none;
  }
  .event--01 .event__kasumi {
    top: 250px;
    left: auto;
    right: -10px;
    width: 100px;
  }
  .event--02 .event__seigaiha {
    top: -40px;
    left: calc(50% - 50vw - 512px);
  }
  .event--02 .event__kasumi {
    top: 30px;
    left: -10px;
    width: 90px;
  }
  .event--03 .event__paws {
    top: 280px;
    left: calc(50% - 5px);
    width: 80px;
  }
  .event--04 .event__bone {
    top: 170px;
    left: auto;
    right: 16px;
    width: 56px;
  }
  .event--04 .event__seigaiha {
    top: 200px;
    right: calc(50% - 50vw - 512px);
  }
  .event__ttl {
    top: -20px;
    left: 20px;
    font-size: 32px;
  }
  .event .event__badge {
    top: -88px;
    right: 8px;
    width: 64px;
    height: 64px;
    font-size: 12px;
  }
  .event__lead {
    font-size: 20px;
  }
  .event__txt {
    margin-top: 20px;
    font-size: 15px;
  }
  .event__info {
    margin-top: 24px;
  }
  .event__info > div + div {
    margin-top: 18px;
  }
  .event__info dt {
    width: 70px;
    height: 28px;
    font-size: 12px;
  }
  .event__info dd {
    font-size: 15px;
  }
  .event__info small {
    font-size: 12px;
  }
  .event--03 .event__info > div:last-child dd {
    font-size: 14px;
  }
  .event__box {
    padding: 20px;
  }
  .event__box-ttl {
    font-size: 16px;
  }
  .event__notes li {
    font-size: 12px;
  }
  .other {
    margin-top: 100px;
    padding: 50px 20px 30px;
    border-radius: 20px;
  }
  .other__ume-gold {
    top: -40px;
    left: 40px;
    width: 80px;
  }
  .other__ume-red {
    top: 16px;
    left: -14px;
    width: 56px;
  }
  .other__ttl span {
    padding: 12px 18px 22px;
    background-size: 100% 100%;
    font-size: 15px;
    white-space: nowrap;
  }
  .other__list {
    font-size: 16px;
  }
  .other__list small {
    font-size: 13px;
  }
  .other__txt p {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.9;
  }
  .info {
    padding: calc(13.89vw + 60px) 0 70px;
  }
  .info__seigaiha-r {
    top: 40px;
    right: -500px;
  }
  .info__seigaiha-l {
    left: -400px;
  }
  .info__card {
    padding: 30px 20px;
  }
  .info__ttl {
    font-size: 20px;
  }
  .info__ttl::after {
    margin: 16px auto;
  }
  .info__txt {
    font-size: 14px;
  }
  .info__pet {
    gap: 16px;
  }
  .info__pet-img {
    width: 120px;
    height: 120px;
  }
  .info__monkey {
    bottom: -30px;
    right: 12px;
    width: 60px;
  }
  .footer {
    height: 200px;
  }
  .footer__catch {
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.6;
  }
  .footer__copy {
    left: 0;
    right: 0;
    bottom: 10px;
    font-size: 10px;
    text-align: center;
  }
}

/* =========================================================
   FADE IN（assets/js/main.js と連動）
   .js-fade は JS が動いたときだけ html に付く
   ========================================================= */
.js-fade [data-fade] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fade [data-fade].is-show {
  opacity: 1;
  transform: none;
}
/* 2枚並ぶカードは右を少し遅らせる */
.js-fade .info__card--pet[data-fade] {
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade [data-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}