*, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      background-color: #26142d;
      font-family: 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', sans-serif;
      color: #fff;
    }

    .page-wrap {
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
    }

    /* ─── HERO ─── */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 1300px;
      margin: 0 auto;
    }
    .hero__image { width: 1300px; }
    .hero__image img { width: 100%; display: block; }
    .hero__title {
      position: relative;
      z-index: 2;
      width: 1083px;
      margin-top: -60px;
    }
    .hero__title img { width: 100%; display: block; }

    /* ─── NEWS ─── */
    .news {
      width: 1300px;
      margin: 54px auto 98px;
    }
    .news-item {
      background: #1a0821;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 62px;
      padding: 30px 71px;
    }
    .news-item__label img { height: 23px; display: block; }
    .news-item__divider {
      width: 1px;
      height: 136px;
      background: #6d233e;
      flex-shrink: 0;
    }
    .news-item__date {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      white-space: nowrap;
      width: 162px;
    }
    .news-item__text {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
    }

    /* ─── SECTION CAPTION ─── */
    .section-caption {
      width: 1300px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      padding: 67px 0;
    }
    .section-caption img { width: 750px; height: 125px; display: block; }

    /* ─── INTRO ─── */
    .intro {
      width: 1300px;
      margin: 0 auto;
      background: #190620;
      background-image: url('img/intro_bg.webp');
      border-radius: 20px;
      padding: 99px 86px 116px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 61px;
    }
    .intro-text-upper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 37px;
      width: 1128px;
    }
    .intro-text-upper__heading { width: 875px; }
    .intro-text-upper__heading img { width: 100%; display: block; }
    .intro-text-upper__body {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      text-align: center;
    }
    .intro-text-upper__body p { margin: 0; }
    .intro-thumbnails {
      display: grid;
      grid-template-columns: repeat(3, 260px);
      grid-template-rows: repeat(2, 368px);
      gap: 50px;
    }
    .intro-thumbnails__item {
      width: 260px;
      height: 368px;
      border-radius: 10px;
      overflow: hidden;
    }
    .intro-thumbnails__item img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .intro-text-lower {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 56px;
      width: 1065px;
    }
    .intro-text-lower__body {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      text-align: center;
    }
    .intro-text-lower__body p { margin: 0; }
    .intro-text-lower__img { width: 1034px; }
    .intro-text-lower__img img { width: 100%; display: block; }

    /* ─── TITLES ─── */
    .titles {
      width: 1300px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 50px;
    }
    .title-card {
      background: #1a0821;
      border-radius: 20px;
      width: 1300px;
      height: 1230px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .title-card__bg {
      position: absolute;
      top: 40px; left: 40px;
      width: 1220px; height: 1150px;
      border-radius: 20px;
      overflow: hidden;
    }
    .title-card__bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .title-card__desc {
      position: absolute;
      bottom: 119px;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      text-align: center;
      white-space: nowrap;
      color: #fff;
      text-shadow: 0 0 6px black;
    }
    .title-card__desc p { margin: 0; }
    .title-card__desc--dark {
      color: #0a0a0a;
      text-shadow: 0 0 6px white;
    }
    .title-card__desc--shadow-red   { text-shadow: 0 0 6px #711616; }
    .title-card__desc--shadow-yellow { text-shadow: 0 0 6px #4a3c05; }
    .title-card__desc--shadow-dpurple { text-shadow: 0 0 6px #20152c; }
    .title-card__desc--shadow-green { text-shadow: 0 0 6px #184b08; }
    .title-card__link {
      position: absolute;
      bottom: 62px;
      left: 50%;
      transform: translateX(-50%);
      width: 248px;
      height: 43px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-weight: 300;
      font-size: 14px;
      letter-spacing: 7px;
      color: #fff;
      white-space: nowrap;
    }
    .title-card__link--red     { background: linear-gradient(to right, #aa2502, #f7b829); }
    .title-card__link--blue    { background: linear-gradient(to right, #116ca5, #7dd9e1); }
    .title-card__link--purple  { background: linear-gradient(to right, #9552cf, #d1afe3); }
    .title-card__link--gold    { background: linear-gradient(to right, #cf9316, #d8cd6e); }
    .title-card__link--crimson { background: linear-gradient(to right, #b5061c, #eb9267); }

    /* ─── POINT ─── */
    .point {
      width: 1300px;
      margin: 0 auto;
      background: #1a0821;
      border-radius: 20px;
      padding: 64px 83px 81px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 37px;
    }
    .point__heading { width: 630px; }
    .point__heading img { width: 100%; display: block; }
    .point__text {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      text-align: center;
    }
    .point__text p { margin: 0; }

    /* ─── BONUS ─── */
    .bonus {
      width: 1300px;
      margin: 0 auto;
      background: #1a0821;
      border-radius: 20px;
      padding: 121px 0 119px;
      display: flex;
      justify-content: center;
    }
    .bonus__text {
      font-weight: 300;
      font-size: 24px;
      letter-spacing: 4.8px;
      line-height: 45px;
      text-align: center;
    }

    /* ─── PRODUCT ─── */
    .product {
      width: 1300px;
      margin: 0 auto;
      background: #1a0821;
      border-radius: 20px;
      padding: 98px 142px 103px 85px;
      display: flex;
      flex-direction: column;
      gap: 55px;
    }
    .product-section { display: flex; flex-direction: column; gap: 30px; }
    .product-section--gap31 { gap: 31px; }
    .product-section--gap33 { gap: 33px; }
    .product-section__heading { height: 23px; }
    .product-section__heading img { height: 100%; display: block; }
    .product-table {
      display: flex;
      flex-direction: column;
      gap: 7px;
      font-size: 20px;
      letter-spacing: 4px;
      line-height: 45px;
    }
    .product-row { display: flex; gap: 56px; align-items: center; }
    .product-row__label { font-weight: 600; width: 195px; flex-shrink: 0; }
    .product-row__value { font-weight: 300; }

    /* ─── FOOTER ─── */
    .footer {
      width: 1300px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      padding: 110px 0 103px;
    }
    .footer__logo { width: 100px; height: 100px; }
    .footer__logo img { width: 100%; display: block; }