:root{--ink:#effbff;--muted:#b4dbe7;--line:rgba(177,233,255,.30);--purple:rgba(193,141,255,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#03192a}body{margin:0;color:var(--ink);background:#03192a;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.04em}
a{color:inherit;text-decoration:none}.artwork{background:#031b30}.artwork img{display:block;width:100%;height:auto}
.wrap{width:min(1180px,92vw);margin:auto}.articles{padding:68px 0 88px;background:linear-gradient(#082e4b,#041d32)}.articles.deep{background:linear-gradient(#051f36,#021528)}.articles.violet{background:linear-gradient(#15133c,#070e2b)}
.kicker{text-align:center;color:#7bd8ef;font-size:.76rem;letter-spacing:.2em}.articles.violet .kicker{color:#c7a7ff}
.articles h2{text-align:center;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;line-height:1.6}.lead{text-align:center;color:#c6e8f1;margin:0 auto 34px;line-height:1.9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards.two{grid-template-columns:repeat(2,1fr);max-width:900px;margin:auto}
.card{min-height:235px;padding:26px 24px;border:1px solid var(--line);border-radius:23px;background:linear-gradient(145deg,rgba(17,76,110,.78),rgba(2,29,51,.94));display:flex;flex-direction:column;box-shadow:0 18px 55px rgba(0,0,0,.22);transition:.2s ease}
a.card{cursor:pointer}a.card:hover,a.card:focus-visible{transform:translateY(-4px);border-color:#bdefff;box-shadow:0 22px 60px rgba(0,0,0,.32)}
.violet .card{border-color:var(--purple);background:linear-gradient(145deg,rgba(55,34,105,.78),rgba(8,14,45,.94))}
.role{color:#84d8ec;font-size:.77rem;letter-spacing:.1em}.violet .role{color:#d2b7ff}.card h3{font-size:1.04rem;line-height:1.7;font-weight:500}.card p{color:#c3dde7;font-family:"Yu Gothic",sans-serif;font-size:.87rem;line-height:1.8}.card footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(174,231,255,.14);display:flex;justify-content:space-between;gap:12px;color:#9ed5e4;font-size:.75rem}.card footer strong{color:white}
.pending-card{opacity:.72;border-style:dashed}.nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.nav a,.epilogue a{border:1px solid rgba(168,229,251,.46);padding:12px 22px;border-radius:999px}.pending{text-align:center;color:#82aabd;font-family:"Yu Gothic",sans-serif;font-size:.72rem;margin-top:22px}
.epilogue{padding:42px 20px 70px;text-align:center;background:linear-gradient(#081630,#241d45);color:#f8e8c5}.epilogue a{display:inline-block;border-color:rgba(255,211,134,.58)}
@media(max-width:820px){.cards,.cards.two{grid-template-columns:1fr}.card{min-height:0}.articles{padding:54px 0 70px}.wrap{width:92vw}}

/* --- Link fix: approved images remain untouched; links are layered over them --- */
.linked-art{position:relative}
.img-hotspot{
  position:absolute;
  z-index:20;
  display:block;
  border-radius:999px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.18);
}
.img-hotspot:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  background:rgba(255,255,255,.10);
}
/* Main note CTA areas */
.hs-s1-note{left:16%;bottom:4%;width:52%;height:12%}
.hs-s2-note{left:58%;bottom:13%;width:34%;height:9%}
.hs-s3-note{left:64%;bottom:15%;width:28%;height:7%}
.hs-s4-note{left:66%;bottom:14%;width:28%;height:7%}
.hs-s5-note{left:65%;bottom:14%;width:29%;height:7%}
.hs-s6-note{left:65%;bottom:19%;width:28%;height:6%}

/* Bottom internal-navigation areas */
.hs-s1-next{left:37%;bottom:0;width:28%;height:7%}
.hs-s2-next{left:32%;bottom:0;width:36%;height:8%}
.hs-s3-next{left:32%;bottom:0;width:36%;height:8%}
.hs-s4-next{left:32%;bottom:0;width:36%;height:8%}
.hs-s5-next{left:32%;bottom:0;width:36%;height:8%}
.hs-s6-top{left:26%;bottom:0;width:48%;height:9%}

/* Guaranteed visible navigation beneath each section */
.real-section-nav{
  text-align:center;
  margin-top:32px;
}
.real-section-nav a{
  display:inline-block;
  padding:13px 26px;
  border:1px solid rgba(174,232,255,.55);
  border-radius:999px;
  background:rgba(6,48,77,.56);
  color:#e9fbff;
  font-size:.86rem;
}
.real-section-nav a:active{
  transform:translateY(1px);
}
@media(max-width:820px){
  .img-hotspot{min-height:32px}
  .hs-s1-note{left:10%;width:62%}
  .hs-s2-note,.hs-s3-note,.hs-s4-note,.hs-s5-note,.hs-s6-note{left:55%;width:40%}
  .hs-s1-next,.hs-s2-next,.hs-s3-next,.hs-s4-next,.hs-s5-next{left:22%;width:56%}
  .hs-s6-top{left:18%;width:64%}
}

/* === Image choice buttons: make every button-like icon interactive === */
.choice-hotspot{
  position:absolute;
  z-index:25;
  display:block;
  border-radius:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.18);
}
.choice-hotspot:focus-visible{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:2px;
  background:rgba(255,255,255,.08);
}

/* SECTION 1: six choices in a 2 x 3 area on the right */
.s1-c1{left:49%;top:43%;width:15%;height:10%}
.s1-c2{left:66%;top:43%;width:15%;height:10%}
.s1-c3{left:49%;top:54%;width:15%;height:10%}
.s1-c4{left:66%;top:54%;width:15%;height:10%}
.s1-c5{left:49%;top:65%;width:15%;height:10%}
.s1-c6{left:66%;top:65%;width:15%;height:10%}

/* SECTION 2: six choices across the lower middle */
.s2-c1{left:3%;top:49%;width:15%;height:16%}
.s2-c2{left:18%;top:49%;width:15%;height:16%}
.s2-c3{left:33%;top:49%;width:15%;height:16%}
.s2-c4{left:48%;top:49%;width:15%;height:16%}
.s2-c5{left:63%;top:49%;width:15%;height:16%}
.s2-c6{left:78%;top:49%;width:19%;height:16%}

/* SECTION 3: five "わたしの根っこ" choices */
.s3-c1{left:3%;top:49%;width:18%;height:18%}
.s3-c2{left:21%;top:49%;width:18%;height:18%}
.s3-c3{left:40%;top:49%;width:18%;height:18%}
.s3-c4{left:59%;top:49%;width:18%;height:18%}
.s3-c5{left:78%;top:49%;width:19%;height:18%}

/* SECTION 4: five core-value choices */
.s4-c1{left:3%;top:49%;width:18%;height:18%}
.s4-c2{left:21%;top:49%;width:18%;height:18%}
.s4-c3{left:40%;top:49%;width:18%;height:18%}
.s4-c4{left:59%;top:49%;width:18%;height:18%}
.s4-c5{left:78%;top:49%;width:19%;height:18%}

/* SECTION 5: five circulation choices */
.s5-c1{left:3%;top:48%;width:18%;height:18%}
.s5-c2{left:21%;top:48%;width:18%;height:18%}
.s5-c3{left:40%;top:48%;width:18%;height:18%}
.s5-c4{left:59%;top:48%;width:18%;height:18%}
.s5-c5{left:78%;top:48%;width:19%;height:18%}

/* SECTION 6: six life-cycle choices */
.s6-c1{left:1%;top:43%;width:16%;height:18%}
.s6-c2{left:17%;top:43%;width:16%;height:18%}
.s6-c3{left:33%;top:43%;width:16%;height:18%}
.s6-c4{left:49%;top:43%;width:16%;height:18%}
.s6-c5{left:65%;top:43%;width:16%;height:18%}
.s6-c6{left:81%;top:43%;width:18%;height:18%}

/* Highlight target briefly when jumped to */
:target{scroll-margin-top:12px}

/* Replacement Hero: only real interactive elements */
.hero-white-note{
  position:absolute;
  z-index:35;
  left:61.8%;
  top:81.0%;
  width:13.0%;
  height:5.0%;
  border-radius:999px;
  display:block;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.18);
}
.hero-down{
  position:absolute;
  z-index:35;
  left:46.5%;
  top:92.2%;
  width:7%;
  height:6.5%;
  border-radius:50%;
  display:block;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.18);
}
.hero-white-note:focus-visible,.hero-down:focus-visible{
  outline:3px solid #1676b8;
  outline-offset:2px;
}