/* 既存のベージュ面はそのままに、外周だけを濃くして紙のような陰影を足すレイヤー。
   中央は完全に透明なので、内側の明るさは変わらない。
   トップページは全言語で同じ意匠にする。 */

.hero-container::before,
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply;
  background-image:
    /* 中央は透明、いちばん外側だけ濃く */
    radial-gradient(125% 105% at 50% 48%,
      rgba(168, 128, 68, 0) 0%,
      rgba(168, 128, 68, 0) 78%,
      rgba(168, 128, 68, 0.06) 88%,
      rgba(158, 118, 60, 0.16) 95%,
      rgba(138, 100, 46, 0.34) 99%,
      rgba(130, 92, 42, 0.44) 100%),
    /* 左右の縁 */
    linear-gradient(to right,
      rgba(140, 100, 46, 0.44) 0,
      rgba(142, 102, 48, 0.26) 10px,
      rgba(146, 106, 50, 0.10) 26px,
      rgba(146, 106, 50, 0.03) 48px,
      rgba(146, 106, 50, 0) 78px,
      rgba(146, 106, 50, 0) calc(100% - 78px),
      rgba(146, 106, 50, 0.03) calc(100% - 48px),
      rgba(146, 106, 50, 0.10) calc(100% - 26px),
      rgba(142, 102, 48, 0.26) calc(100% - 10px),
      rgba(140, 100, 46, 0.44) 100%),
    /* 上下の縁（下端は文字が乗るため上端より弱く） */
    linear-gradient(to bottom,
      rgba(140, 100, 46, 0.38) 0,
      rgba(142, 102, 48, 0.22) 10px,
      rgba(146, 106, 50, 0.09) 26px,
      rgba(146, 106, 50, 0.03) 48px,
      rgba(146, 106, 50, 0) 80px,
      rgba(146, 106, 50, 0) calc(100% - 110px),
      rgba(146, 106, 50, 0.02) calc(100% - 70px),
      rgba(146, 106, 50, 0.05) calc(100% - 36px),
      rgba(142, 102, 48, 0.10) calc(100% - 14px),
      rgba(140, 100, 46, 0.18) 100%);
}

/* 上部パネルの背面に薄く敷く曼荼羅（装飾のみ） */
.hero-container::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 50%;
  width: min(460px, 86%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: url('/img/mandala-zodiac.png') no-repeat center / contain;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 82%);
}

/* 下部パネルの最下部に置く象の意匠（装飾のみ） */
.about-section {
  padding-bottom: 150px;
}

.about-section::after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 130px;
  aspect-ratio: 651 / 900;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: url('/img/elephant-lotus.png') no-repeat center bottom / contain;
  opacity: 0.5;
}

/* 陰影の上に本文が乗るようにする */
.hero-container > *,
.about-section > * {
  position: relative;
  z-index: 1;
}