:root {
  --COLOR_10TH_H1_DECORATION: #056ae68c;
  --COLOR_10TH_H2_DECORATION: #056ae68c;
  --COLOR_10TH_BUTTON_HOVER_BACKGROUND: #056ae68c;
  --OPACITY_10TH_CURRENT_BACKGROUND_IMAGE: 0.07;
  --IMAGE_10TH_PAGE_BACKGROUND_1: url("../images/10th-anniversary-bg01.png");
  --IMAGE_10TH_PAGE_BACKGROUND_2: url("../images/10th-anniversary-bg02.png");
  --POSITION_10TH_PAGE_BACKGROUND_TOP_Y: 340px;
  --POSITION_10TH_PAGE_BACKGROUND_MIDDLE_Y: 3500px;
}

@media print, screen and (width >= 1000px) {
  .l-mainVisual__content {
    padding-top: var(--SIZE_32);
  }
}

.l-content {
  background-image:
    var(--IMAGE_10TH_PAGE_BACKGROUND_1),
    var(--IMAGE_10TH_PAGE_BACKGROUND_2),
    var(--IMAGE_10TH_PAGE_BACKGROUND_1);
  background-position:
    center var(--POSITION_10TH_PAGE_BACKGROUND_TOP_Y),
    center var(--POSITION_10TH_PAGE_BACKGROUND_MIDDLE_Y),
    center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.l-pageTitle {
  --COLOR_HEADING_DECORATION: var(--COLOR_10TH_H1_DECORATION);
}

.m-heading-type2 {
  --COLOR_HEADING_DECORATION: var(--COLOR_10TH_H2_DECORATION);
}

[id="01"] + .m-panel-list .m-panel-type2 {
  background-color: var(--COLOR_BASE_WHITE);
  border-radius: var(--SIZE_10);
  height: 100%;
  overflow: clip;
  padding: var(--SIZE_24);
  position: relative;
}

[id="01"] + .m-panel-list .m-panel-type2__media {
  align-items: center;
  aspect-ratio: 34 / 18;
  background-color: var(--COLOR_BASE_WHITE);
  border: 1px solid rgb(45 45 45 / 14%);
  border-radius: var(--SIZE_10);
  container-type: inline-size;
  display: flex;
  justify-content: center;
  margin-top: 0;
  min-block-size: 180px;
  order: 2;
  overflow: clip;
  padding: var(--SIZE_24);
  position: relative;
}

[id="01"] + .m-panel-list .m-panel-type2__media::before {
  background-image: var(--IMAGE_10TH_CURRENT_BACKGROUND);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  inset: 0;
  opacity: var(--OPACITY_10TH_CURRENT_BACKGROUND_IMAGE);
  pointer-events: none;
  position: absolute;
}

[id="01"] + .m-panel-list .m-panel-type2__media > * {
  position: relative;
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(1) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-01.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(2) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-02.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(3) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-03.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(4) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-04.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(5) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-05.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(6) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-06.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(7) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-07.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(8) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-08.png");
}

[id="01"] + .m-panel-list .m-panel-type2:nth-child(9) .m-panel-type2__media {
  --IMAGE_10TH_CURRENT_BACKGROUND: url("../images/01-bg-09.png");
}

[id="01"] + .m-panel-list .m-panel-type2__body {
  margin-top: var(--SIZE_24);
  order: 3;
}

[id="01"] + .m-panel-list .m-text-number {
  inline-size: 100%;
  margin-top: 0;
}

[id="01"] + .m-panel-list .m-text-number__item {
  gap: var(--SIZE_12);
}

[id="01"] + .m-panel-list .m-text-number__head {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

[id="01"] + .m-panel-list .m-text-number__body {
  display: grid;
  gap: var(--SIZE_8);
  justify-items: center;
}

[id="01"] + .m-panel-list .m-text-number__value {
  align-items: baseline;
  display: inline-flex;
  font-family: var(--FONT_FAMILY_BOLD);
  font-size: clamp(var(--FONT_SIZE_32), 22cqi, 5rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--FONT_WEIGHT_BOLD);
  isolation: isolate;
  justify-content: center;
  letter-spacing: 0;
  line-height: 0.95;
  margin-inline: auto;
  max-inline-size: 100%;
  position: relative;
  white-space: nowrap;
}

[id="01"] + .m-panel-list .m-text-number__value[data-animation-number="1100"],
[id="01"] + .m-panel-list .m-text-number__value[data-animation-number="3000"] {
  font-size: clamp(var(--FONT_SIZE_32), 20cqi, 4.625rem);
}

[id="01"] + .m-panel-list .m-text-number__value::after {
  background-color: #056ae651;
  block-size: 0.18em;
  bottom: 0.02em;
  content: "";
  inline-size: 100%;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
}

[id="01"] + .m-panel-list .m-text-number__unit {
  font-size: 0.46em;
  line-height: 1;
  margin-left: 0.08em;
}

[id="01"] + .m-panel-list .m-text-number__unit:first-child {
  margin-left: 0;
  margin-right: 0.12em;
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-text-number__head,
[id="01"] + .m-panel-list[data-animation-ready="true"] .m-text-number__value,
[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2__body {
  opacity: 0;
  transform: translateY(var(--SIZE_12));
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2.is-inView .m-text-number__head {
  animation: p-10th-current-text-in 520ms ease-out 140ms both;
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2.is-inView .m-text-number__value {
  animation: p-10th-current-number-in 860ms ease-out 180ms both;
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2.is-inView .m-text-number__value:nth-child(2) {
  animation-delay: 300ms;
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2.is-inView .m-text-number__value::after {
  animation: p-10th-current-line 680ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

[id="01"] + .m-panel-list[data-animation-ready="true"] .m-panel-type2.is-inView .m-panel-type2__body {
  animation: p-10th-current-text-in 520ms ease-out 360ms both;
}

@media (prefers-reduced-motion: reduce) {
  [id="01"] + .m-panel-list .m-panel-type2,
  [id="01"] + .m-panel-list .m-text-number__head,
  [id="01"] + .m-panel-list .m-text-number__value,
  [id="01"] + .m-panel-list .m-text-number__value::after,
  [id="01"] + .m-panel-list .m-panel-type2__body {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@keyframes p-10th-current-number-in {
  0% {
    opacity: 0;
    transform: translateY(var(--SIZE_12));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes p-10th-current-text-in {
  0% {
    opacity: 0;
    transform: translateY(var(--SIZE_12));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes p-10th-current-line {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

[id="02"] + .m-media + .m-panel-list .m-heading-type3 {
  margin-top: 0;
}

[id="02"] + .m-media + .m-panel-list .m-heading-type3__heading {
  font-size: var(--FONT_SIZE_18);
}

[id="02"] + .m-media + .m-panel-list .m-heading-type3__headingMain {
  display: block;
}

[id="02"] + .m-media + .m-panel-list .m-heading-type3__headingMain:first-child {
  display: inline-block;
  font-size: var(--FONT_SIZE_22);
  isolation: isolate;
  line-height: 1.2;
  margin-bottom: var(--SIZE_12);
  position: relative;
}

[id="02"] + .m-media + .m-panel-list .m-heading-type3__headingMain:first-child::after {
  background-color: #056ae651;
  block-size: 0.5em;
  bottom: 0.02em;
  content: "";
  inline-size: 100%;
  left: 0;
  position: absolute;
  z-index: -1;
}

@media print, screen and (width >= 1000px) {
  [id="02"] + .m-media + .m-panel-list .m-heading-type3__heading {
    font-size: var(--FONT_SIZE_20);
  }

  [id="02"] + .m-media + .m-panel-list .m-heading-type3__headingMain:first-child {
    font-size: var(--FONT_SIZE_24);
  }
}

:is(.m-heading-type2[id="02"], .m-heading-type2[id="05"]) + .m-media {
  inline-size: 100%;
}

:is(.m-heading-type2[id="02"], .m-heading-type2[id="05"]) + .m-media .m-media__wrap {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: none;
}

:is(.m-heading-type2[id="02"], .m-heading-type2[id="05"]) + .m-media .m-media__inner {
  inline-size: 100%;
}

:is(.m-heading-type2[id="02"], .m-heading-type2[id="05"]) + .m-media .m-media__item {
  block-size: auto;
  inline-size: 100%;
}

.p-10th-footerVisual {
  grid-column: 1 / -1;
  line-height: 0;
  margin: 0;
}

.p-10th-footerVisual__image {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

.m-media:has(.m-media__item[src$="/10-img-next.jpg"]) {
  inline-size: 100%;
}

.m-media:has(.m-media__item[src$="/10-img-next.png"]) .m-media__wrap {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: none;
}

.m-media:has(.m-media__item[src$="/10-img-next.jpg"]) .m-media__caption {
  display: none;
}

.m-media:has(.m-media__item[src$="/10-img-next.jpg"]) .m-media__inner {
  border-radius: var(--SIZE_10) var(--SIZE_10) 0 0;
  inline-size: 100%;
}

.m-media:has(.m-media__item[src$="/10-img-next.jpg"]) .m-media__item {
  block-size: auto;
  inline-size: 100%;
}

.m-media:has(.m-media__item[src$="/10-img-next.jpg"]) + .m-box-type2 {
  border-radius: 0 0 var(--SIZE_10) var(--SIZE_10);
  margin-top: 0;
}

.p-10th-lookbackWidget {
  --local-collapsed-height: 640px;

  margin-top: var(--SIZE_MODULE_MARGIN);
}

.p-10th-lookbackWidget__item + .p-10th-lookbackWidget__item {
  margin-top: var(--SIZE_MODULE_MARGIN);
}

.p-10th-lookbackWidget__item > .p-10th-lookback {
  margin-top: 0;
}

.p-10th-lookbackWidget .m-widget-showMore__buttonRoot {
  margin-top: var(--SIZE_32);
}

.p-10th-lookbackWidget .m-widget-showMore__button {
  --local-hover-background: var(--COLOR_10TH_BUTTON_HOVER_BACKGROUND);
}

.p-10th-lookback__box {
  margin-top: 0;
}

.p-10th-lookback__box > .m-box-type2__body {
  padding: var(--SIZE_42);
}

.p-10th-lookback__box--project {
  background-color: var(--COLOR_BACKGROUND_2);
}

.p-10th-lookback__box--comment {
  background-color: #ffffff;
}

.p-10th-lookback__author .m-media__inner {
  block-size: 150px;
  border-radius: 50%;
  inline-size: 150px;
}

.p-10th-lookback__author .m-media__item {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

@media (scripting: enabled) {
  .p-10th-lookbackWidget:not(.is-expanded) .js-showMore__list {
    max-height: var(--local-collapsed-height);
  }
}

@media only screen and (width < 1000px) {
  .p-10th-lookback__box--project {
    border-radius: var(--SIZE_10) var(--SIZE_10) 0 0;
  }

  .p-10th-lookback__box--comment {
    border-radius: 0 0 var(--SIZE_10) var(--SIZE_10);
  }
}

@media print, screen and (width >= 1000px) {
  .p-10th-lookbackWidget {
    --local-collapsed-height: 380px;
  }

  .p-10th-lookback__box--project {
    border-radius: var(--SIZE_10) 0 0 var(--SIZE_10);
  }

  .p-10th-lookback__box--comment {
    border-radius: 0 var(--SIZE_10) var(--SIZE_10) 0;
  }
}
