* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.8), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(190,199,187,.35), transparent 30%),
    linear-gradient(180deg, #f7f6f1 0%, #d8d6ce 45%, #b9b8b2 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  width: 430px;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  color: #2d2d2b;
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "Times New Roman",
    serif;
  letter-spacing: .06em;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* 
  ここから追加
*/

a:link { color: #74776e; }
a:visited { color: #74776e; }
a:active { color: #74776e; }

/* 
  追加ここまで
*/

/* 全体 */
.garden-wrap {
  position: relative;
  min-height: 100vh;
  padding: 34px 20px 44px;
  overflow: hidden;
}

/* 背景装飾：迷路庭園 */
.garden-wrap::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(70, 78, 68, .28);
  border-radius: 34px 34px 120px 120px;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(72,82,70,.18) 13% 14%, transparent 14% 33%, rgba(72,82,70,.14) 33% 34%, transparent 34% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(72,82,70,.12) 18% 19%, transparent 19% 46%, rgba(72,82,70,.15) 46% 47%, transparent 47% 100%);
  opacity: .75;
  pointer-events: none;
}

.garden-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 96px;
  width: 520px;
  height: 520px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 38%, rgba(48,55,48,.08)),
    linear-gradient(180deg, rgba(48,55,48,.08), transparent 45%, rgba(255,255,255,.18));
  clip-path: polygon(
    0 0, 47% 0, 47% 7%, 53% 7%, 53% 0, 100% 0,
    100% 47%, 93% 47%, 93% 53%, 100% 53%,
    100% 100%, 53% 100%, 53% 93%, 47% 93%, 47% 100%,
    0 100%, 0 53%, 7% 53%, 7% 47%, 0 47%
  );
  opacity: .22;
  pointer-events: none;
  animation: slow-turn 36s linear infinite;
}

@keyframes slow-turn {
  from {
    transform: translateX(-50%) rotate(45deg);
  }
  to {
    transform: translateX(-50%) rotate(405deg);
  }
}

/* ヘッダー */
.site-header {
  position: relative;
  z-index: 2;
  padding: 42px 18px 28px;
  text-align: center;
}

.site-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border: 1px solid rgba(62,69,60,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.36);
  color: #5c6258;
  font-size: 10px;
  letter-spacing: .22em;
}

h1 {
  margin: 0;
  color: #22231f;
  font-size: 37px;
  line-height: 1.22;
  font-weight: normal;
  letter-spacing: .14em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 12px 28px rgba(62,64,58,.24);
}

.title-line {
  position: relative;
  width: 180px;
  height: 1px;
  margin: 22px auto 20px;
  background: linear-gradient(90deg, transparent, rgba(63,71,59,.55), transparent);
}

.title-line::before,
.title-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(63,71,59,.46);
  background: rgba(246,246,240,.9);
  transform: rotate(45deg);
}

.title-line::before {
  left: 36px;
}

.title-line::after {
  right: 36px;
}

.lead {
  margin: 0 auto;
  width: 330px;
  color: #454740;
  font-size: 13px;
  line-height: 2.05;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

/* 中央の庭園盤 */
.puzzle-garden {
  position: relative;
  z-index: 2;
  margin: 26px auto 0;
  width: 360px;
  padding: 20px 14px 24px;
  border: 1px solid rgba(70,77,66,.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.68), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(225,225,216,.26));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    0 24px 50px rgba(73,75,68,.22);
  backdrop-filter: blur(2px);
}

.puzzle-garden::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(74,80,70,.22);
  border-radius: 22px;
  pointer-events: none;
}

.garden-label {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  color: #6a6d64;
  font-size: 10px;
  text-align: center;
  letter-spacing: .24em;
}

/* コンテンツ一覧 */
.gate-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
}

.gate {
  position: relative;
  display: block;
  min-height: 70px;
  padding: 16px 18px 14px 64px;
  color: #282a26;
  text-decoration: none;
  border: 1px solid rgba(65,72,63,.28);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(232,232,222,.42)),
    linear-gradient(90deg, rgba(95,104,87,.08), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 18px rgba(68,70,62,.12);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.gate::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 18px;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(67,74,62,.42);
  background:
    radial-gradient(circle at 100% 50%, transparent 0 6px, rgba(255,255,255,.86) 7px),
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(176,183,169,.32));
  transform: rotate(45deg);
  box-shadow: 0 5px 12px rgba(64,68,58,.16);
}

.gate::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 50%;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(68,74,64,.14);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.36), transparent 58%);
}

.gate span {
  position: relative;
  z-index: 2;
  display: block;
}

.gate-title {
  font-size: 16px;
  line-height: 1.4;
}

.gate-sub {
  margin-top: 4px;
  color: #74776e;
  font-size: 9px;
  letter-spacing: .18em;
  font-family: Georgia, "Times New Roman", serif;
}

.gate:hover,
.gate:focus {
  transform: translateY(-3px);
  border-color: rgba(51,59,48,.52);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(239,239,229,.58)),
    linear-gradient(90deg, rgba(83,94,77,.12), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 28px rgba(58,63,54,.2);
}

/* 各扉の微差 */
.gate01 {
  background-color: rgba(239,239,234,.55);
}

.gate02 {
  background-color: rgba(218,223,214,.52);
}

.gate03 {
  background-color: rgba(226,221,211,.55);
}

.gate04 {
  background-color: rgba(216,219,216,.56);
}

.gate05 {
  background-color: rgba(238,236,229,.56);
}

.gate06 {
  background-color: rgba(211,215,207,.58);
}

/* 下部 */
.footer-note {
  position: relative;
  z-index: 2;
  margin: 24px auto 0;
  width: 330px;
  padding: 16px 18px;
  color: #5c5f58;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  border-top: 1px solid rgba(69,76,65,.24);
  border-bottom: 1px solid rgba(255,255,255,.54);
}

.small-piece {
  position: absolute;
  z-index: 1;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(69,76,65,.22);
  background: rgba(255,255,255,.28);
  transform: rotate(45deg);
  pointer-events: none;
}

.piece-a {
  left: 24px;
  top: 156px;
  animation: float-a 8s ease-in-out infinite;
}

.piece-b {
  right: 26px;
  top: 298px;
  width: 30px;
  height: 30px;
  animation: float-b 10s ease-in-out infinite;
}

.piece-c {
  left: 38px;
  bottom: 78px;
  width: 24px;
  height: 24px;
  animation: float-c 9s ease-in-out infinite;
}

@keyframes float-a {
  0%, 100% {
    transform: rotate(45deg) translateY(0);
    opacity: .48;
  }
  50% {
    transform: rotate(52deg) translateY(-10px);
    opacity: .76;
  }
}

@keyframes float-b {
  0%, 100% {
    transform: rotate(45deg) translateY(0);
    opacity: .38;
  }
  50% {
    transform: rotate(32deg) translateY(12px);
    opacity: .68;
  }
}

@keyframes float-c {
  0%, 100% {
    transform: rotate(45deg) translateX(0);
    opacity: .32;
  }
  50% {
    transform: rotate(60deg) translateX(10px);
    opacity: .64;
  }
}