@font-face {
  font-family: "KouzanBrush";
  src: url("./assets/fonts/kouzan.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "ShipproriMincho";
  src: url("./assets/fonts/shipprori.otf") format("opentype");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background: #e8ddc9;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(12px, 4vw, 42px);
  color: #17120d;
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 115, 72, 0.16), rgba(139, 115, 72, 0) 34%),
    linear-gradient(180deg, #efe5d1 0%, #dfd1b8 100%);
  font-family: "ShipproriMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
}

.certificate {
  position: relative;
  overflow: hidden;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 96px) clamp(26px, 8vw, 112px) clamp(42px, 8vw, 78px);
  background:
    linear-gradient(rgba(255, 252, 244, 0.48), rgba(255, 250, 239, 0.38)),
    url("assets/生地.png") center top / 760px auto repeat;
  border: 1px solid rgba(122, 92, 43, 0.55);
  box-shadow: 0 18px 50px rgba(62, 43, 22, 0.18);
}

.paper {
  position: relative;
}

.certificate::before {
  content: "";
  position: absolute;
  inset: clamp(9px, 2vw, 16px);
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(134, 101, 48, 0.42);
  box-shadow: inset 0 0 0 1px rgba(134, 101, 48, 0.18);
}

.cloud-left-top,
.cloud-bottom-right {
  position: absolute;
  z-index: 0;
  width: clamp(760px, 104%, 960px);
  max-width: none;
  height: auto;
  opacity: 1;
  filter: sepia(18%) brightness(1.03) contrast(0.92);
  pointer-events: none;
  user-select: none;
}

.cloud-left-top {
  top: -58px;
  left: -78px;
}

.cloud-bottom-right {
  right: -78px;
  bottom: -70px;
  transform: scale(-1, -1);
  transform-origin: center;
}

.record-label {
  position: absolute;
  top: clamp(40px, 8vw, 78px);
  right: clamp(28px, 6vw, 70px);
  z-index: 1;
  width: clamp(42px, 8vw, 68px);
  height: auto;
}

.document-date {
  position: absolute;
  top: clamp(54px, 9vw, 82px);
  left: clamp(24px, 5vw, 58px);
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(15px, 2.4vw, 22px);
  line-height: 1.75;
  letter-spacing: 0;
  font-family: "ShipproriMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
}

.certificate-header {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding-top: clamp(46px, 7vw, 72px);
  text-align: center;
}

.title-image {
  display: block;
  width: min(78%, 610px);
  height: auto;
}

.ornament-line {
  width: min(52%, 360px);
  height: 1px;
  margin: clamp(24px, 4vw, 34px) auto clamp(12px, 2vw, 18px);
  background: linear-gradient(90deg, rgba(137, 105, 51, 0), rgba(137, 105, 51, 0.68), rgba(137, 105, 51, 0));
  position: relative;
}

.ornament-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(137, 105, 51, 0.78);
  background: rgba(255, 250, 236, 0.78);
}

.ornament-line-short {
  width: min(42%, 300px);
  margin-top: clamp(14px, 2vw, 18px);
}

.recipient-name {
  margin: 0;
  font-family: "KouzanBrush", "Hiragino Mincho ProN", serif;
  font-size: clamp(36px, 8.4vw, 60px);
  line-height: 1.18;
  font-weight: 400;
}

.recipient-name span:first-child {
  display: inline-block;
  min-width: 4em;
  letter-spacing: 0;
}

.honorific {
  margin-left: 0.28em;
}

.reading-body {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: clamp(28px, 6vw, 54px) auto 0;
  font-size: clamp(16px, 2.45vw, 18px);
  line-height: 2.05;
  letter-spacing: 0;
  font-family: "ShipproriMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  text-align: left;
}

.reading-body p {
  margin: 0 0 1.45em;
}

.certificate-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 36px);
  align-items: end;
  max-width: 710px;
  margin: clamp(20px, 6vw, 48px) auto 0;
  padding-top: clamp(18px, 4vw, 28px);
  border-top: 1px solid rgba(116, 89, 44, 0.34);
}

.closing-note {
  color: rgba(23, 18, 13, 0.72);
  font-family: "ShipproriMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.9;
  font-weight: 600;
}

.closing-note p {
  margin: 0 0 0.35em;
}

.seal-area {
  display: grid;
  grid-template-columns: auto clamp(88px, 17vw, 128px);
  gap: clamp(10px, 2vw, 18px);
  align-items: center;
}

.reader-name {
  margin: 0;
  white-space: nowrap;
  font-family: "KouzanBrush", "Hiragino Mincho ProN", serif;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.15;
  font-weight: 400;
}

.seal-image {
  display: block;
  width: clamp(88px, 17vw, 128px);
  height: auto;
}

@media (max-width: 640px) {
  body {
    padding: 0;
  }

  .certificate {
    width: 100%;
    padding: 76px 26px 40px;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  .record-label {
    top: 38px;
    right: 16px;
    width: 42px;
  }

  .cloud-left-top,
  .cloud-bottom-right {
    width: 144vw;
    min-width: 540px;
    max-width: none;
    opacity: 1;
  }

  .cloud-left-top {
    top: -42px;
    left: -58px;
  }

  .cloud-bottom-right {
    right: -58px;
    bottom: -54px;
  }

  .document-date {
    top: 42px;
    left: 14px;
    font-size: 14px;
    line-height: 1.6;
  }

  .certificate-header {
    padding-top: 64px;
  }

  .title-image {
    width: min(70%, 320px);
    transform: translateX(-8px);
  }

  .ornament-line {
    width: min(50%, 250px);
    margin: 30px auto 22px;
  }

  .ornament-line-short {
    width: min(44%, 230px);
    margin-top: 26px;
  }

  .recipient-name {
    font-size: clamp(34px, 11vw, 44px);
    line-height: 1.24;
  }

  .reading-body {
    margin-top: 44px;
    line-height: 1.9;
  }

  .certificate-footer {
    grid-template-columns: 1fr;
  }

  .seal-area {
    justify-self: end;
  }
}