body {
  background-image: linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(-45deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(-45deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(-45deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(-45deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(-45deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%), linear-gradient(135deg, #6666cc 10.1%, rgba(0, 0, 0, 0) 10.1%);
  background-repeat: repeat !important;
  background-position: 0px 0px, 4px 4px, 4px 4px, 6px 6px, 6px 6px, 8px 8px, 8px 8px, 10px 10px, 10px 10px, 12px 12px, 12px 12px !important;
  background-size: 10px 10px;
}

:root {
  --ink: #000;
  --paper: #fff;
  --primary: #6666cc;
  --lavender-soft: #e7e5fb;
  --secondary: #bfbf13;
  --gold-bright: #e5d800;
  --card-bg: #ffffff;
  --shadow: rgba(102, 102, 204, 0.08);
  --side-gap: clamp(18px, 4vw, 52px);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  font-family: "UD Shin Go R JIS2004 AP", sans-serif;
  line-height: 1.75;
  letter-spacing: 0.075em;
  min-height: 100vh;
  margin: 0;
  color: var(--primary);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-shell {
  width: min(96%, 1200px);
  margin: 0 auto;
  padding: 0;
  background-color: var(--paper);
}

.site-header {
  padding: 24px;
}
.site-header__mini {
  margin: 0;
  opacity: 0.2;
}
.site-header__mini svg {
  width: 71px;
  height: auto;
}

#icon-hobo-logo path {
  fill: #6666cc;
}

.journal-page {
  width: var(--content-width);
  margin: 0 auto;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
}
.hero__link {
  text-decoration: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
}
.hero__logo-wrap {
  position: relative;
  width: min(720px, 100%);
  margin-bottom: 48px;
}
.hero__logo-wrap img {
  width: 100%;
  height: auto;
}
.hero__lead {
  width: min(720px, 100%);
  margin: 0 auto;
}
.hero__lead p {
  font-family: "UD Shin Go B JIS2004 AP", sans-serif;
  font-size: 24px;
  line-height: 1.75;
  margin: 0;
}

.marquee {
  overflow: hidden;
  width: 100%;
  height: 40px;
  margin: 72px auto;
  animation: marquee 20s linear infinite;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 620 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2366c' d='M20.23 36.08V3.92h7.4v32.16h-7.4Zm16.828 0V3.92h10.16l8.16 21.68 8.16-21.68h10.2v32.16h-7.08V12.52l-8.88 23.56h-5.08l-8.76-23.4v23.4h-6.88Zm43.284 0 11.6-32.16h9.32l11.6 32.16h-8.24l-2.16-6.72h-11.92l-2.16 6.72h-8.04Zm12.16-12.84h8l-4-12.52-4 12.52Zm26.962 12.84V3.92h7.4V17.6l12.04-13.68h9.4v.12l-13.48 14L148.584 36v.08h-9.4l-9.36-12.88-2.96 3.08v9.8h-7.4Zm47.661.64c-9.24 0-15.32-6.32-15.32-16.72 0-10.4 6.08-16.72 15.32-16.72s15.36 6.32 15.36 16.72c0 10.4-6.12 16.72-15.36 16.72Zm0-6.56c4.72 0 7.6-3.8 7.6-10.16s-2.88-10.16-7.6-10.16-7.6 3.76-7.6 10.16c0 6.32 2.88 10.16 7.6 10.16Zm23.378 5.92V3.92h12.36c8.36 0 12.8 3.64 12.8 10.68 0 5.44-2.88 8.24-6.04 9.64l8.72 11.84h-8.88l-7.28-10.6h-4.28v10.6h-7.4ZM202.143 10h-4.24v9.56h4.8c2.2 0 5.4-.8 5.4-4.84 0-3.56-2.44-4.72-5.96-4.72Zm22.688 26.08V3.92h22.28v6.28h-14.88v6.24h13.2v6.08h-13.2v7.28h15.24v6.28h-22.64Zm30.969 0V3.92h7.4V17.6l12.04-13.68h9.4v.12l-13.48 14L284.92 36v.08h-9.4l-9.36-12.88-2.96 3.08v9.8h-7.4Zm35.188 0V3.92h7.4v32.16h-7.4Zm16.828 0V3.92h7.16l13.6 20.36V3.92h7v32.16h-7.12l-13.64-20.4v20.4h-7Zm37.257 0V3.92h7.4v32.16h-7.4Zm26.589-.2.32-6.4c1.08.44 2.68.76 4.28.76 3.12 0 4.56-1.56 4.56-6.28V3.92h7.4V25c0 8.48-4.04 11.72-11 11.72-2.04 0-4.12-.28-5.56-.84Zm39.651.84c-9.24 0-15.32-6.32-15.32-16.72 0-10.4 6.08-16.72 15.32-16.72s15.36 6.32 15.36 16.72c0 10.4-6.12 16.72-15.36 16.72Zm0-6.56c4.72 0 7.6-3.8 7.6-10.16s-2.88-10.16-7.6-10.16-7.6 3.76-7.6 10.16c0 6.32 2.88 10.16 7.6 10.16Zm23.058-6.96V3.92h7.4v19.2c0 4.56 2.2 7.04 6.16 7.04s6.16-2.48 6.16-7.04V3.92h7.28V23.2c0 8.8-4.44 13.52-13.56 13.52-9.12 0-13.44-4.72-13.44-13.52Zm36.171 12.88V3.92h12.36c8.36 0 12.8 3.64 12.8 10.68 0 5.44-2.88 8.24-6.04 9.64l8.72 11.84h-8.88l-7.28-10.6h-4.28v10.6h-7.4ZM482.182 10h-4.24v9.56h4.8c2.2 0 5.4-.8 5.4-4.84 0-3.56-2.44-4.72-5.96-4.72Zm22.688 26.08V3.92h7.16l13.6 20.36V3.92h7v32.16h-7.12l-13.64-20.4v20.4h-7Zm34.378 0 11.6-32.16h9.32l11.6 32.16h-8.24l-2.16-6.72h-11.92l-2.16 6.72h-8.04Zm12.16-12.84h8l-4-12.52-4 12.52Zm26.962 12.84V3.92h7.4V29.8h14v6.28h-21.4Z' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 620px 40px;
}

@keyframes marquee {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -620px 0;
  }
}
.articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.journal-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--primary);
  background: var(--card-bg);
  box-shadow: 0 10px 30px var(--shadow);
}
.journal-card__link {
  text-decoration: none;
}
.journal-card__thumb {
  position: relative;
  padding-top: 52.5%;
  background-size: cover;
}
.journal-card__badge {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 95px;
  height: 60px;
}
.journal-card__badge svg {
  width: 100%;
  height: 100%;
}
.journal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 10px 14px;
}
.journal-card__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin: 0;
}
.journal-card__meta span {
  line-height: 1;
  display: block;
}
.journal-card__meta span:nth-child(1) {
  padding: 2px;
  color: var(--paper);
  background: var(--secondary);
}
.journal-card__meta span:nth-child(2) {
  font-size: 16px;
  color: var(--secondary);
}
.journal-card__meta span:nth-child(3) {
  color: var(--secondary);
}
.journal-card__title {
  font-family: "UD Shin Go B JIS2004 AP", sans-serif;
  font-size: 20px;
  line-height: 1.22;
  margin: 0;
  color: var(--primary);
}

.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
  overflow: hidden;
}
.site-footer::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -24px;
  display: block;
  width: 89px;
  height: 72px;
  margin-top: 40px;
  background-image: url(./images/osaru.png);
  background-size: contain;
}
.site-footer__mark img {
  width: 100%;
  max-width: 400px;
  height: auto;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  width: 100%;
  margin: 40px auto;
}
.site-footer__brand {
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-right: 0;
  margin-left: auto;
  color: var(--primary);
}

.share-links {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--primary);
}
.share-links__label {
  font-family: "UD Shin Go B JIS2004 AP", sans-serif;
  text-decoration: none;
  color: var(--primary);
}
.share-links a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--primary);
  border-radius: 50%;
}
.share-links a i {
  font-size: 24px;
}
.share-links__text {
  width: auto;
  height: auto;
  border-radius: 0;
}

.mail-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mail-links a {
  font-family: "UD Shin Go B JIS2004 AP", sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--primary);
}
.mail-links a i {
  font-size: 24px;
}

@media (max-width: 980px) {
  .articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .site-header__mini {
    font-size: 18px;
  }
  .hero {
    padding: 0 24px;
  }
  .hero__lead p {
    font-size: clamp(14px, 3.73333333vw, 16px);
    text-align: justify;
    letter-spacing: 0;
  }
  .articles {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 22px;
    margin-top: 72px;
  }
}
@media (max-width: 479px) {
  .hero__lead p br {
    display: none;
  }
}