@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;600;700&display=swap");

/* ==========================================================================
   Hero
   PC はデザイン（1440×540。ヘッダー60pxを除いた見える範囲）の比率を保って拡大縮小させるため cqw で指定（トップのヒーローと同じ組み方）
   ========================================================================== */
.p-anniv-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
}

.p-anniv-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 4px;
  background: var(--color-border);
}

.p-anniv-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem var(--gutter) 2.5rem;
  font-family: var(--font-serif);
  text-align: center;
}

.p-anniv-hero__deco {
  display: none;
}

/* SP：コラージュを全幅で置き、ロゴは小さめ（画面幅の40%）にして左上に重ねる */
.p-anniv-hero__logo {
  position: absolute;
  top: 2.5rem;
  left: var(--gutter);
  z-index: 2;
  width: 40%;
  max-width: 12.5rem;
  container-type: inline-size;
}

.p-anniv-hero__logo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴの下側に重ねる英字（ロゴ画像の幅に対する割合で配置・サイズ指定） */
.p-anniv-hero__logo-en {
  position: absolute;
  top: 73.8%;
  left: 46%;
  font-size: 4.667cqw;
  font-weight: 600;
  letter-spacing: var(--ls-sm);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  transform: translateX(-50%);
}

.p-anniv-hero__collage {
  position: relative;
  order: 1;
  width: calc(100% + var(--gutter) * 2);
  aspect-ratio: 880 / 720;
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
  background: var(--color-white);
}

/* コラージュの絵柄は Figma の 820×600 の比率のまま。枠が縦に長いSPでは、右を基準に左側をトリミングする */
.p-anniv-hero__collage-inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 820 / 600;
}

.p-anniv-hero__collage::before,
.p-anniv-hero__collage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.p-anniv-hero__collage::before {
  background: url("../images/anniversary/hero-overlay.svg") no-repeat 0 0 / 100% 100%;
  mix-blend-mode: screen;
}

.p-anniv-hero__collage::after {
  background: linear-gradient(218.67deg, rgba(255, 255, 255, 0) 30.42%, rgba(255, 255, 255, 0.9) 98.64%);
}

.p-anniv-hero__collage-item {
  position: absolute;
  max-width: none;
  object-fit: cover;
  transform: rotate(35deg);
}

/* 位置・大きさは Figma の 820×600 の枠に対する割合（回転前の寸法）。角度はすべて 35° */
.p-anniv-hero__collage-item--18 { top: 49.446%; left: 12.258%; width: 38.777%; height: 75.077%; }
.p-anniv-hero__collage-item--13 { top: -2.613%; left: 76.858%; width: 27.49%; height: 53.225%; }
.p-anniv-hero__collage-item--10 { top: 54.344%; left: 65.705%; width: 20.096%; height: 14.958%; }
.p-anniv-hero__collage-item--11 { top: -27.499%; left: 51.913%; width: 31.994%; height: 24.523%; }
.p-anniv-hero__collage-item--12 { top: -4.178%; left: 39.903%; width: 32.033%; height: 24.625%; }
.p-anniv-hero__collage-item--14 { top: 106.692%; left: 41.268%; width: 54.967%; height: 53.027%; }
.p-anniv-hero__collage-item--16 { top: 26.891%; left: 36.03%; width: 32.042%; height: 24.486%; }
.p-anniv-hero__collage-item--17 { top: 55.953%; left: 83.144%; width: 32.001%; height: 58.312%; }

.p-anniv-hero__years {
  order: 3;
  margin-top: 1.5rem;
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: var(--ls-sm);
  line-height: var(--lh-normal);
  color: var(--color-gold);
}

.p-anniv-hero__title {
  order: 4;
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 5.6vw, 1.875rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
  line-height: 1.4;
  text-wrap: balance;
}

.p-anniv-hero__lead {
  order: 5;
  margin-top: 1rem;
  font-size: var(--fs-14);
  font-weight: 200;
  letter-spacing: var(--ls-xs);
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .p-anniv-hero__stage {
    position: relative;
    display: block;
    max-width: 1920px;
    aspect-ratio: 1440 / 540;
    margin-inline: auto;
    padding: 0;
    container-type: inline-size;
  }

  /* デザインはヘッダー（60px）の下まで続く 600px の高さ。ヘッダーに隠れる上端の60px分は上にはみ出させる */
  .p-anniv-hero__collage {
    position: absolute;
    top: -11.111%;
    right: 0;
    width: 56.944%;
    height: 111.111%;
    aspect-ratio: auto;
    margin: 0;
  }

  .p-anniv-hero__collage-inner {
    width: 100%;
    aspect-ratio: auto;
  }

  .p-anniv-hero__deco {
    position: absolute;
    top: -11.111%;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 111.111%;
  }

  .p-anniv-hero__logo {
    position: absolute;
    top: 10.37%;
    left: 50%;
    z-index: 2;
    width: 20.833%;
    max-width: none;
    transform: translateX(-50%);
  }

  .p-anniv-hero__years,
  .p-anniv-hero__title,
  .p-anniv-hero__lead {
    position: absolute;
    z-index: 2;
    margin: 0;
    transform: translateX(-50%);
  }

  .p-anniv-hero__years {
    top: 59.63%;
    left: 49.201%;
    font-size: 1.3889cqw;
    white-space: nowrap;
  }

  .p-anniv-hero__title {
    top: 65.926%;
    left: 49.167%;
    font-size: 2.0833cqw;
    line-height: var(--lh-normal);
    white-space: nowrap;
  }

  .p-anniv-hero__br {
    display: none;
  }

  .p-anniv-hero__lead {
    top: 77.593%;
    left: 49.167%;
    width: 48.611%;
    font-size: 1.25cqw;
  }
}

/* ==========================================================================
   Numbers（数字で見る70年）
   ========================================================================== */
.p-anniv-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.p-anniv-number {
  --number-color: var(--color-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 9.375rem;
  padding: 0.5rem 0.625rem 1rem;
  text-align: center;
  color: var(--number-color);
  background: var(--color-white);
  border-top: 5px solid var(--number-color);
  border-bottom: 1px solid var(--number-color);
}

.p-anniv-number--green { --number-color: var(--color-green); }
.p-anniv-number--yellow { --number-color: var(--color-yellow); }
.p-anniv-number--blue { --number-color: var(--color-blue); }

.p-anniv-number__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1.2715;
}

.p-anniv-number__num {
  font-family: var(--font-en);
  font-size: 2.75rem;
  font-weight: 400;
}

.p-anniv-number__unit {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
}

.p-anniv-number__text {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
  line-height: var(--lh-normal);
  text-wrap: balance;
}

.p-anniv-number__sub {
  display: block;
  font-size: var(--fs-14);
}

@media screen and (min-width: 768px) {
  .p-anniv-numbers {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .p-anniv-number__num {
    font-size: 3.75rem;
  }

  .p-anniv-number__unit {
    font-size: var(--fs-24);
  }

  .p-anniv-number__text {
    font-size: var(--fs-18);
  }
}

/* ==========================================================================
   Greeting（ごあいさつ）
   ========================================================================== */
.p-anniv-greeting {
  display: grid;
  gap: 1.875rem;
}

.p-anniv-greeting__body .c-text + .c-text {
  margin-top: 1.8em;
}

.p-anniv-greeting__figure {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

.p-anniv-greeting__photo {
  display: block;
  width: 100%;
  height: auto;
}

.p-anniv-greeting__caption {
  margin-top: 1.25rem;
  text-align: center;
  line-height: 1.4;
}

.p-anniv-greeting__name {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
}

.p-anniv-greeting__post {
  font-size: var(--fs-14);
}

@media screen and (min-width: 768px) {
  .p-anniv-greeting {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
    align-items: start;
  }

  .p-anniv-greeting__figure {
    margin-inline: 0;
  }
}

/* ==========================================================================
   History（これまでの歩み）
   ========================================================================== */
.p-anniv-history {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-left: 1.75rem;
}

.p-anniv-history::before {
  content: "";
  position: absolute;
  top: 1.21875rem;
  bottom: 2.5rem;
  left: calc(0.375rem - 0.5px);
  width: 1px;
  background: var(--color-green);
}

.p-anniv-history__item {
  position: relative;
  display: grid;
  gap: 0.25rem;
}

.p-anniv-history__item::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: calc(-1.75rem + 1px);
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-green);
  border-radius: 50%;
}

.p-anniv-history__year,
.p-anniv-history__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
  line-height: 1.8;
}

.p-anniv-history__text {
  line-height: 1.8;
}

.p-anniv-history__br {
  display: none;
}

@media screen and (min-width: 768px) {
  .p-anniv-history {
    padding-left: 0;
  }

  .p-anniv-history::before {
    left: 14.125rem;
  }

  .p-anniv-history__item {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 0;
  }

  .p-anniv-history__item::before {
    left: calc(14.125rem - 4.5px);
  }

  .p-anniv-history__year,
  .p-anniv-history__title {
    font-size: var(--fs-18);
  }

  .p-anniv-history__text {
    font-size: var(--fs-18);
  }

  .p-anniv-history__br {
    display: inline;
  }
}

/* ==========================================================================
   More（協会概要への導線）
   ========================================================================== */
.p-anniv-more__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-anniv-more__en {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-lg);
  line-height: var(--lh-normal);
  text-transform: uppercase;
}

.p-anniv-more__title {
  margin-top: 0.625rem;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-sm);
  line-height: var(--lh-normal);
}

.p-anniv-more__br {
  display: inline;
}

.p-anniv-more__text {
  margin-top: 1.25rem;
  letter-spacing: var(--ls-sm);
  line-height: 1.8;
}

.p-anniv-more__buttons {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 1rem;
  margin-top: 1.875rem;
}

@media screen and (min-width: 768px) {
  .p-anniv-more__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .p-anniv-more__br {
    display: none;
  }

  .p-anniv-more__text {
    font-size: var(--fs-18);
    line-height: 2;
  }

  .p-anniv-more__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: auto;
    justify-content: center;
    gap: 1.25rem;
  }
}