/* utalpha.com 共通スタイル */

:root {
  --text: #000000;
  --text-muted: #3d3d3d; /* 補足文用。ほぼ黒だが本文より一段弱く */
  --bg: #ffffff;
  --bg-alt: #f7f8fb;
  --border: #e4e7ee;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(31, 36, 48, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  /* ロゴの「+」に使われている色の水玉模様(参考: 公式Instagramの投稿画像に合わせた配色・サイズ感・重なり具合)。
     縦に長い1枚の絵(1600x7200)を用意し、ページごとに background-position で違う位置を切り出して使う。
     繰り返し(repeat)はしないので、スクロールしても同じ柄が繰り返される見た目にならない。
     background-size を横幅基準にしているので、ウィンドウを最大化しても横いっぱいにフィットする。
     カードなど背景が不透明な要素の下には隠れるので、余白部分にだけうっすら見える */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'7200'%3E%3Ccircle%20cx%3D'-18.9'%20cy%3D'76.4'%20r%3D'294.0'%20fill%3D'none'%20stroke%3D'rgba(216%2C95%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'274.9'%20cy%3D'169.6'%20r%3D'315.0'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1381.4'%20cy%3D'738.6'%20r%3D'261.3'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1562.6'%20cy%3D'655.4'%20r%3D'252.2'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1061.7'%20cy%3D'262.7'%20r%3D'40.7'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'916.3'%20cy%3D'345.9'%20r%3D'40.4'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'76.0'%20cy%3D'585.4'%20r%3D'41.5'%20fill%3D'rgba(95%2C219%2C92%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1351.3'%20cy%3D'232.5'%20r%3D'44.7'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1566.2'%20cy%3D'1081.6'%20r%3D'306.9'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1377.8'%20cy%3D'804.4'%20r%3D'310.9'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'84.4'%20cy%3D'1425.2'%20r%3D'289.3'%20fill%3D'none'%20stroke%3D'rgba(216%2C95%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'171.6'%20cy%3D'1608.8'%20r%3D'212.5'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'446.2'%20cy%3D'1047.6'%20r%3D'39.1'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1039.0'%20cy%3D'1626.1'%20r%3D'43.1'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1334.3'%20cy%3D'1544.6'%20r%3D'29.8'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'613.8'%20cy%3D'1126.7'%20r%3D'22.7'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'213.3'%20cy%3D'1735.0'%20r%3D'209.0'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'42.7'%20cy%3D'1791.0'%20r%3D'260.0'%20fill%3D'none'%20stroke%3D'rgba(96%2C220%2C216%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1406.4'%20cy%3D'2483.1'%20r%3D'321.5'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1537.6'%20cy%3D'2190.9'%20r%3D'332.7'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'617.2'%20cy%3D'1762.9'%20r%3D'46.8'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1160.0'%20cy%3D'2429.4'%20r%3D'43.0'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'431.5'%20cy%3D'2295.9'%20r%3D'31.9'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1392.6'%20cy%3D'2292.4'%20r%3D'45.9'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'716.7'%20cy%3D'2349.2'%20r%3D'81.9'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1359.2'%20cy%3D'2490.7'%20r%3D'307.5'%20fill%3D'none'%20stroke%3D'rgba(216%2C95%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1584.8'%20cy%3D'2675.3'%20r%3D'256.6'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'269.7'%20cy%3D'3187.0'%20r%3D'326.6'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'-13.7'%20cy%3D'3127.0'%20r%3D'228.4'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'771.2'%20cy%3D'2841.6'%20r%3D'33.9'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'530.3'%20cy%3D'2557.5'%20r%3D'37.2'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'743.1'%20cy%3D'2883.1'%20r%3D'34.5'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'905.7'%20cy%3D'2609.5'%20r%3D'35.4'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'247.0'%20cy%3D'3471.7'%20r%3D'267.5'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'9.0'%20cy%3D'3334.3'%20r%3D'266.1'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1389.8'%20cy%3D'4026.9'%20r%3D'222.8'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1554.2'%20cy%3D'3927.1'%20r%3D'249.9'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'47.2'%20cy%3D'3552.7'%20r%3D'37.4'%20fill%3D'none'%20stroke%3D'rgba(219%2C92%2C97%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'692.7'%20cy%3D'3613.5'%20r%3D'23.7'%20fill%3D'rgba(95%2C219%2C92%2C0.4)'%2F%3E%3Ccircle%20cx%3D'115.5'%20cy%3D'3856.5'%20r%3D'34.1'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'771.6'%20cy%3D'3598.9'%20r%3D'139.4'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1361.8'%20cy%3D'4272.9'%20r%3D'286.8'%20fill%3D'rgba(95%2C219%2C92%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1582.2'%20cy%3D'4173.1'%20r%3D'268.2'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'94.3'%20cy%3D'4677.3'%20r%3D'295.6'%20fill%3D'none'%20stroke%3D'rgba(216%2C95%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'161.7'%20cy%3D'4916.7'%20r%3D'208.9'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'789.0'%20cy%3D'4682.5'%20r%3D'31.8'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'427.2'%20cy%3D'4250.7'%20r%3D'36.8'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'91.0'%20cy%3D'4116.6'%20r%3D'38.9'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'986.9'%20cy%3D'4283.8'%20r%3D'44.8'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'130.3'%20cy%3D'4952.4'%20r%3D'267.9'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'125.7'%20cy%3D'5133.6'%20r%3D'209.8'%20fill%3D'rgba(95%2C219%2C92%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1386.0'%20cy%3D'5681.7'%20r%3D'240.9'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1558.0'%20cy%3D'5552.3'%20r%3D'284.1'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'660.3'%20cy%3D'5202.2'%20r%3D'34.0'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1570.9'%20cy%3D'5049.9'%20r%3D'36.0'%20fill%3D'none'%20stroke%3D'rgba(219%2C92%2C97%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'615.5'%20cy%3D'5414.7'%20r%3D'40.7'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1198.2'%20cy%3D'5177.5'%20r%3D'23.2'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'567.9'%20cy%3D'5318.3'%20r%3D'130.2'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1485.1'%20cy%3D'5985.1'%20r%3D'291.6'%20fill%3D'rgba(219%2C92%2C97%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1458.9'%20cy%3D'5740.9'%20r%3D'333.8'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'98.9'%20cy%3D'6353.3'%20r%3D'243.9'%20fill%3D'none'%20stroke%3D'rgba(219%2C92%2C97%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'157.1'%20cy%3D'6520.7'%20r%3D'221.0'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'263.2'%20cy%3D'6260.4'%20r%3D'33.2'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1330.6'%20cy%3D'6156.6'%20r%3D'29.4'%20fill%3D'none'%20stroke%3D'rgba(95%2C219%2C92%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'551.6'%20cy%3D'5909.2'%20r%3D'29.6'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'548.8'%20cy%3D'6187.1'%20r%3D'31.5'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'555.2'%20cy%3D'6130.2'%20r%3D'117.4'%20fill%3D'rgba(220%2C215%2C94%2C0.4)'%2F%3E%3Ccircle%20cx%3D'258.4'%20cy%3D'6672.3'%20r%3D'242.9'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'-2.4'%20cy%3D'6693.7'%20r%3D'276.5'%20fill%3D'none'%20stroke%3D'rgba(220%2C215%2C94%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'1488.8'%20cy%3D'7366.2'%20r%3D'225.6'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'1455.2'%20cy%3D'7147.8'%20r%3D'304.8'%20fill%3D'rgba(216%2C95%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'457.9'%20cy%3D'6799.2'%20r%3D'32.4'%20fill%3D'none'%20stroke%3D'rgba(219%2C92%2C97%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3Ccircle%20cx%3D'988.6'%20cy%3D'6701.9'%20r%3D'44.0'%20fill%3D'rgba(94%2C97%2C220%2C0.4)'%2F%3E%3Ccircle%20cx%3D'572.9'%20cy%3D'6574.2'%20r%3D'47.3'%20fill%3D'rgba(96%2C220%2C216%2C0.4)'%2F%3E%3Ccircle%20cx%3D'649.6'%20cy%3D'6788.2'%20r%3D'118.8'%20fill%3D'none'%20stroke%3D'rgba(94%2C97%2C220%2C0.55)'%20stroke-width%3D'2.5'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100vw auto;
  background-position: top center;
  line-height: 1.8;
}

/* ページごとに背景の絵の切り出し位置を変える(同じ絵の別の場所を見せているだけ) */
.pg-about { background-position: center -2200px; }
.pg-circles { background-position: center -4400px; }
.pg-contact { background-position: center -1200px; }
.pg-events { background-position: center -3300px; }

/* リンク(踏めるところ)は常に下線を付ける */
a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* ロゴ扱いのサイト名は下線なし */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.brand-logo {
  height: 36px;
  width: auto;
  transition: transform 0.25s ease;
}

.brand:hover {
  text-decoration: none;
}

.brand:hover .brand-logo {
  transform: rotate(14deg) scale(1.1);
}

.site-nav {
  display: flex;
  gap: 32px;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  padding: 4px 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
}

/* ヒーロー(トップページ):全員が写る範囲で上下だけ切り抜く
   元写真は4:3。16:10 にすると上下合計17%カット(人物は上10%の天井・下7%の床の外に収まっている)。
   これ以上横長にすると人が欠けるので注意 */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero-bg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* カット分の6割を上から、4割を下から */
  object-position: 50% 60%;
}

/* PC ではヘッダー(64px)+ヒーローで画面1枚に収める。
   足りない分は下(床・座っている子の足)からカットし、頭側は残す */
@media (min-width: 801px) {
  .hero-bg {
    aspect-ratio: auto;
    height: calc(100vh - 65px);
    object-position: 50% 30%;
  }
}

/* 写真の下側だけを静かに暗くする(文字影に頼らない) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 16, 0.62) 100%);
}

/* 見出しは左下に置く */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 24px 24px 52px max(24px, calc((100vw - 960px) / 2 + 24px));
  animation: fade-up 0.7s ease both;
}

.hero-content .kicker {
  color: rgba(255, 255, 255, 0.8);
}

.hero-content h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.button {
  display: inline-block;
  background: var(--text);
  color: #fff;
  padding: 14px 40px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button:hover {
  opacity: 0.8;
  transform: translateY(-2px);
  text-decoration: none;
}

.button:active {
  transform: translateY(0);
}

/* セクション共通 */
.section {
  padding: 96px 0;
}

.section + .section {
  border-top: 1px solid var(--border);
}

.section h2 {
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

/* 見出し上の英字ラベル */
.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  margin-bottom: 6px;
}


/* カードグリッド */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #c9cdd6;
}

.card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.tag {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* イベント情報 */
.event-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(31, 36, 48, 0.04);
}

.event-card + .event-card {
  margin-top: 24px;
}

.event-card h3 {
  font-size: 1.25rem;
  margin: 10px 0 20px;
}

.event-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: start;
}

/* フライヤー画像がないイベントは1カラムにする */
.event-body:has(> .prose:only-child) {
  grid-template-columns: 1fr;
}

.flyer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.flyer-grid a {
  display: block;
  transition: transform 0.2s ease;
}

.flyer-grid a:hover {
  transform: scale(1.02);
}

.flyer-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.event-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 800px) {
  .event-body {
    grid-template-columns: 1fr;
  }
}

/* 活動写真ギャラリー(ポラロイド風) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 28px;
  margin-top: 12px;
}

.polaroid {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 12px 14px;
  box-shadow: 0 4px 14px rgba(31, 36, 48, 0.08);
  transform: rotate(-1deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.photo-grid .polaroid:nth-child(2n) {
  transform: rotate(0.8deg);
}

.photo-grid .polaroid:nth-child(3n) {
  transform: rotate(-0.5deg);
}

.polaroid:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--shadow);
  z-index: 1;
}

/* マスキングテープ */
.polaroid::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(224, 201, 79, 0.55);
}

.photo-grid .polaroid:nth-child(2n)::before {
  background: rgba(111, 199, 111, 0.5);
  transform: translateX(-50%) rotate(2.5deg);
}

.photo-grid .polaroid:nth-child(3n)::before {
  background: rgba(199, 111, 209, 0.45);
}

.photo-grid .polaroid:nth-child(4n)::before {
  background: rgba(111, 207, 196, 0.55);
  transform: translateX(-50%) rotate(-2deg);
}

.polaroid img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 2px;
}

/* 写真がまだ届いていない活動の空き箱 */
.polaroid-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 210px;
  border: 1px dashed var(--border);
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.polaroid figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.polaroid figcaption .date {
  font-weight: 700;
  color: var(--text);
  margin-right: 8px;
}

/* 本文中の写真 */
.photo-inline {
  margin: 24px 0 8px;
}

.photo-inline img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: var(--shadow);
}

.photo-inline figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* サークル一覧(小さめのカードグリッド。名前だけ必須で、ロゴ・写真・紹介文・リンクは任意) */
.circle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 36px;
  list-style: none;
}

.circle-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.circle-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #c9cdd6;
}

.circle-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.circle-card-photo {
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
}

.circle-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.circle-card-body {
  padding: 16px 18px;
}

.circle-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.circle-card-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.circle-card-header h3 {
  font-size: 1rem;
  line-height: 1.4;
}

.circle-card-body p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* 協賛企業(写真を背景に、ロゴ・社名・紹介文を重ねたバナー) */
.sponsor-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}

.sponsor-feature {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 420px;
  background-color: var(--bg-alt);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sponsor-feature:hover {
  opacity: 0.92;
  text-decoration: none;
}

/* 写真の上にごく薄く暗さを重ねて、白文字を読みやすくする(写真自体は明るく見せる) */
.sponsor-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.3);
}

.sponsor-feature-overlay {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 56px 24px;
}

.sponsor-feature-logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  background: #fff;
  padding: 14px 24px;
}

.sponsor-feature-name {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.sponsor-feature-desc {
  max-width: 46em;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.8;
  text-wrap: balance;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ページタイトル(下層ページ) */
.page-title {
  padding: 88px 0 0;
}

.page-title h1 {
  font-size: 2.2rem;
  letter-spacing: 0.05em;
}

.page-title .lead {
  color: var(--text-muted);
  margin-top: 10px;
}

/* 本文 */
.prose {
  max-width: 42em;
}

.prose p + p {
  margin-top: 1em;
}

.prose dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 32px;
  margin-top: 1em;
}

.prose dt {
  font-weight: 600;
}

.prose dd {
  color: var(--text-muted);
}

/* フッター */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 48px;
  margin-top: 96px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.site-footer .footer-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto 20px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.footer-nav a {
  color: var(--text-muted);
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.footer-sns a {
  color: var(--text-muted);
}

.footer-sns a:hover {
  color: var(--text);
}

/* アニメーションを減らす設定のユーザーには動きを止める */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .site-header .container {
    flex-direction: column;
    height: auto;
    padding: 12px 24px;
    gap: 6px;
  }

  .site-nav {
    gap: 20px;
  }

  .hero {
    padding: 72px 0;
  }

  .hero::before {
    font-size: 14rem;
  }

  .hero::after {
    font-size: 9rem;
  }

  .prose dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .prose dd {
    margin-bottom: 12px;
  }
}