@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600&family=Noto+Sans+JP:wght@400;500;600&family=Shippori+Mincho+B1:wght@500;600;700&display=swap');

:root {
  --kurotobi: #2f1f1b;
  --ruri: #0f3d5e;
  --benikake: #8c2f33;
  --gofun: #f7f2e9;
  --susutake: #5a4a3c;
  --kincha: #b38a4a;
  --ai: #274a78;
  --asagi: #6aa2a6;
  --seiji: #819c8b;
  --tokusa: #6c806f;
  --mizu: #81c7d4;
  --yamabuki: #f8b500;
  --toki: #6f5a7d;
  --kuchiba: #917347;
  --kikyo: #4c3b8b;
  --shion: #8b5f7d;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  background-color: #ffffff;
  color: #1b1715;
}

h1, h2, h3, .navbar-brand {
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0.06em;
}

a {
  color: var(--ruri);
}

a:hover {
  color: var(--benikake);
}

.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--kincha);
}

.quarto-title-banner {
  background-color: var(--kurotobi);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      120deg,
      rgba(25, 16, 12, 0.3),
      rgba(25, 16, 12, 0.08)
    ),
    linear-gradient(
      90deg,
      var(--ruri) 0 12.5%,
      var(--ai) 12.5% 25%,
      var(--asagi) 25% 37.5%,
      var(--seiji) 37.5% 50%,
      var(--yamabuki) 50% 62.5%,
      var(--kincha) 62.5% 75%,
      var(--benikake) 75% 87.5%,
      var(--toki) 87.5% 100%
    ),
    linear-gradient(
      90deg,
      var(--susutake) 0 12.5%,
      var(--kuchiba) 12.5% 25%,
      var(--gofun) 25% 37.5%,
      var(--mizu) 37.5% 50%,
      var(--ruri) 50% 62.5%,
      var(--yamabuki) 62.5% 75%,
      var(--tokusa) 75% 87.5%,
      var(--kurotobi) 87.5% 100%
    ),
    linear-gradient(
      90deg,
      var(--benikake) 0 12.5%,
      var(--toki) 12.5% 25%,
      var(--shion) 25% 37.5%,
      var(--kikyo) 37.5% 50%,
      var(--ai) 50% 62.5%,
      var(--seiji) 62.5% 75%,
      var(--kuchiba) 75% 87.5%,
      var(--kincha) 87.5% 100%
    ),
    linear-gradient(
      90deg,
      var(--gofun) 0 12.5%,
      var(--susutake) 12.5% 25%,
      var(--mizu) 25% 37.5%,
      var(--ruri) 37.5% 50%,
      var(--yamabuki) 50% 62.5%,
      var(--benikake) 62.5% 75%,
      var(--kurotobi) 75% 87.5%,
      var(--asagi) 87.5% 100%
    );
  background-size: auto, auto, 320px 240px, 320px 240px, 320px 240px, 320px 240px;
  background-position: 0 0, 0 0, 0 0, 0 60px, 0 120px, 0 180px;
  background-repeat: repeat, no-repeat, repeat, repeat, repeat, repeat;
  color: #1b1715;
  padding: 3.5rem 1rem 2.5rem;
  position: relative;
  border-bottom: 3px solid var(--kincha);
  overflow: hidden;
  isolation: isolate;
}

.quarto-title-block {
  position: relative;
  z-index: 2;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.quarto-title-banner .title {
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 600;
  margin-bottom: 0.35rem;
  text-shadow: none;
  display: inline-block;
  background-color: #ffffff;
  color: #1b1715;
  padding: 0.4rem 1rem 0.45rem;
  border: 2px solid #ffffff;
  box-shadow: none;
  opacity: 1;
  mix-blend-mode: normal;
  line-height: 1.25;
}

.quarto-title-banner .subtitle {
  font-family: "EB Garamond", "Shippori Mincho B1", serif;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.08em;
  text-shadow: none;
}

.quarto-title-banner .subtitle strong {
  font-weight: 600;
}

.quarto-title-banner .title .en-title,
.navbar-brand .en-title {
  font-family: "EB Garamond", "Shippori Mincho B1", serif;
  letter-spacing: 0.03em;
}

.quarto-title-banner .title .en-title em,
.navbar-brand .en-title em {
  font-style: italic;
}

.mobile-break {
  display: inline;
}

@media (max-width: 576px) {
  .mobile-break {
    display: block;
    height: 0;
  }
}